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内 容 提要 


本 书 将 当前 Web 设计 中 热门 的 响应 式 设计 技术 与 HIML5 和 CSS3 结合 起 来 ， 为 读者 全 面 深 入 地 讲解 
了 针对 各 种 屏幕 大 小 设计 和 开发 现代 网 站 的 各 种 技术 。 仅 讨 论 了 媒体 查询 、 弹 性 布局 、 响 应 式 图 片 ， 
更 将 最 新 和 最 有 用 的 HIML5 和 CSS3 技术 一 并 讲解 ， 是 学 习 最 新 Web 设计 技术 不 可 多 得 的 佳作 。 

本 书 适合 所 有 Web 开发 和 设计 人 员 阅 读 。 
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响应 式 Web 设 计 是 一 种 统一 的 解决 方案 ， 可 以 让 Web 作 品 适 配 手 机 、 平 板 和 桌面 电脑 。 响 应 
式 的 网 站 可 以 适应 用 户 的 屏幕 大 小 ， 为 今天 和 明天 的 设备 都 提供 最 佳 用 户 体验 。 

本 书 涵盖 响应 式 Web 设 计 的 所 有 相关 内 容 。 不 仅 如 此 ， 通 过 介绍 最 新 和 最 有 用 的 HTML5 和 
CSS3 技 术 ， 还 扩充 了 响应 式 设计 的 方法 库 ， 让 设计 变 得 更 简单 ， 更 好 维护 。 此 外 ， 本 书 还 讨论 
了 编写 和 交付 代码 、 图 片 、 文 件 的 最 佳 实践 。 


只 要 会 用 HTML 和 CSS， 就 可 以 学 会 响应 式 Web 设 计 。 



































x, “响应 式 Web 设 计 基 础 "， 简 要 介绍 响应 式 Web 设 计 相 关 的 技术 。 
第 2 章 , “媒体 查询 ”"， 系 统 讲解 CSS 媒 体 查 询 ， 包 括 它 的 能 力 、 语 法 ， 以 及 各 种 使 用 方式 。 
章 


3 章 , “弹性 布局 与 响应 式 图 片 "， 展 示 如 何 设 计 比 例 缩放 布局 和 啊 应 式 图 片 ， 并 对 Flexbox 
布局 进行 全 方位 介绍 。 


第 4 章 ，“HTML5 与 响应 式 Web 设 计 ”, 探讨 HTML5 中 的 语义 元 素 、 文 本 级 语义 ， 以 及 无 障碍 
方面 的 考虑 ， 还 介绍 了 如 何在 网 页 中 添加 视频 和 音频 。 


第 5$ 章 , “CSS3 新 特性 ”， 探 讨 CSS 选 择 符 、HSLA 及 RGBA 颜 色 、Web 排 版 、 视 口 相对 单位 ， 











第 6 章 , “CSS3 高 级 技术 ”， 探 讨 CSS 滤 镜 、 盒 阴影 、 线 性 与 放射 渐变 、 多 背影 ， 以 及 如 何 为 
高 分 辩 率 设备 提供 背景 图 片 。 


第 7 章 , “SVG 与 响应 式 Web 设 计 "， 讲 述 在 文档 中 使 用 SVG 、 将 SVG 作为 背影 图 片 ， 以 及 通 
过 JavaScript 添 加 交互 。 


第 8 章 ,，“CSS3 过 渡 、 变 形 和 动画 "， 看 一 看 使 用 CSS 能 够 做 出 哪些 交互 与 动画 效果 。 
第 9 章 ,“ 表 单 "， 在 HTML5 和 CSS3 之 前 ， 表 单一 直 是 个 难题 ， 现 在 不 同 了 。 


















































第 10 章 ,“ 实 现 响应 式 Web 设 计 ”， 曾 述 在 着 手 实 现 响应 式 Web 设 计时 需要 考虑 的 重要 因素 ， 
并 给 大 家 提供 一 些 实用 的 建议 。 








阅读 前 提 


D 需要 一 个 文本 编辑 咒 
n 需要 一 个 主流 浏览 
n 喜欢 一 些 无 聊 的 笑话 




















读者 对 象 
你 是 否 需 要 写 两 个 网 站 , 一 个 针对 手机 , 一 个 针对 大 显示 器 ? 或 者 你 已 经 完成 了 一 版 响应 式 
Web 设 计 作品 ， 但 不 知道 怎么 把 它 跟 之 前 的 网 站 集成 起 来 ? 好 ， 本 书 可 以 告诉 你 想 知道 的 一 切 。 
只 需 一 些 HTML 和 CSS 基 础 就 可 以 轻松 看 懂 这 本 书 ， 而 本 书 还 包含 了 关于 响应 式 Web 设 计 及 
优秀 网 站 设计 的 更 多 内 容 。 















































排版 约定 


在 本 书 中 ,你 会 发 现 一 些 不 同 的 文本 样式 , 用 以 区 别 不 同 种 类 的 信息 。 下 面 是 这 些 样式 的 一 
些 例子 和 解释 。 


正文 中 的 代码 、 数 据 库 表 名 、 用 户 输 入 会 以 等 宽 字 体 进行 表示 ， 如 :“ 为 了 解决 前 面 的 问题 ， 
可 以 在 网 页 的 <nead> 中 添加 下 面 这 行 代 码 。” 


代码 段 格式 如 下 所 示 : 











img { 
max-width: 100%; 
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新 术语 和 重点 词汇 均 采 用 楷体 字 表 示 。 


M 
| 这 个 图 标 表示 提示 或 者 技巧 。 ] 
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读者 反馈 

我 们 总 是 欢迎 读者 的 反馈 。 如 果 你 对 本 书 有 些 想 法 ， 有 什么 喜欢 或 是 不 喜欢 的 ， 请 反馈 给 我 
们 。 这 将 有 助 于 我 们 开发 出 能 够 充分 满足 读者 需求 的 图 书 。 

一 般 的 反馈 ， 请 发 送 电 子 邮 件 至 feedback@packtpub.com， 并 在 邮件 主题 中 包含 书 名 。 


如 果 你 在 某 个 领域 有 专长 ， 并 有 意 编 写 一 本 书 或 是 贡献 一 份 力量 ， 请 参考 我 们 的 作者 指南 ， 
地 址 为 http://www.packtpub.com/authors。 















































客户 支持 
现在 ， 你 是 一 位 令 我 们 自豪 的 Packt 图 书 的 拥有 者 ， 我 们 会 尽 全 力 帮 你 充分 利用 你 手中 的 书 。 




















下 载 示例 代码 

你 可 以 用 你 的 账户 从 http:/www.packtpub.com 下 载 所 有 已 购买 Packt 图 书 的 示例 代码 文件 。 如 
果 你 从 其 他 地 方 购买 本 书 ， 可 以 访问 http://www.packtpub.com/support 并 注册 ， 我 们 将 通过 电子 邮 
件 把 文件 发 送 给 你 。 





























勘误 表 

虽然 我 们 已 尽力 确保 本 书 内 容 正确 ， 但 出 错 仍 旧 在 所 难免 。 如 果 你 在 我 们 的 书 中 发 现 错误 ， 
不 管 是 文本 还 是 代码 ,希望 能 告知 我 们 ， 我 们 不 胜 感激 。 这 样 做 ， 你 可 以 使 其 他 读者 免 受 挫败 ， 
帮助 我 们 改进 本 书 的 后 续 版 本 。 如 果 你 发 现任 何 错误 ， 请 访问 http://www.packtpub.com/ 
submit-errata 提 交 ， 选 择 你 的 书 ， 点 击 勘 误 表 提交 表单 的 链接 ， 并 输入 详细 说 明 。 勘 误 一 经 核实 ， 
你 的 提交 将 被 接受 ， 此 勘误 将 上 传 到 本 公司 网 站 或 添加 到 现 有 勘误 表 。 从 http:/www.packtpub. 
com/support 选 择 书 名 就 可 以 查看 现 有 的 勘误 表 。 
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版 权 材料 在 互联 网 上 的 盗版 是 所 有 媒体 都 要 面 对 的 问题 。Packt 非 常 重视 保护 版 权 和 许可 证 。 
如 果 你 发 现 我 们 的 作品 在 互联 网 上 被 非法 复制 , 不 管 以 什么 形式 , 都 请 立即 为 我 们 提供 位 置地 址 
或 网 站 名 称 ， 以 便 我 们 可 以 寻求 补救 。 


请 把 可 疑 盗版 材料 的 链接 发 到 copyright@packtpub.com。 
非常 感谢 你 帮助 我 们 保护 作者 ， 以 及 保护 我 们 给 你 带 来 有 价值 内 容 的 能 











如 果 你 对 本 书 内 容 存 有 疑问 ， 不 管 是 哪个 方面 ， 都 可 以 通过 questions@packtpub.com 联 系 我 
们 ， 我 们 将 尽 最 大 努力 来 解决 。 
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几 年 前 ,我 们 看 到 的 网 站 还 都 是 固定 宽度 的 ， 目 标 是 让 所 有 用 户 都 拥有 相同 的 体验 。 这 种 固 
定 宽度 (通常 为 960 像 素 左右 ) 对 笔记 本 电脑 来 说 也 不 算 宽 ， 拥 有 更 大 显示 器 的 用 户 则 会 在 两 侧 
看 到 很 大 的 白 边 。 


2007 年 ， 苹 果 iPhone 首 次 带 来 了 真正 意义 的 手机 上 网 体验 ， 彻底 改 变 了 人 们 上 网 的 方式 。 
本 书 第 1 版 曾 这 么 写 道 : 


“从 2010 年 7 月 到 2011 年 7 月 , 短 短 12 个 月 , 全球 手机 浏览 器 的 使 用 量 就 从 2.86% 才 升 
至 7.02%。” 





























2015 年 年 中 ,同一 家 调查 机 构 ( gs.statcounter.com ) 的 数据 显示 ， 这 个 数字 已 经 达到 33.47%。 
北美 地 区 的 数字 则 是 25.86%。 

不 管 怎么 统计 , 移动 设备 的 增长 都 是 前 所 未 有 的 。 与 此 同时 , 27 英寸 乃至 30 英 寸 的 大 屏幕 显 
示 器 如 今 也 成 为 了 司空 见 惯 的 东西 。 这 样 一 来 ,上 网 设备 屏幕 之 间 的 差距 也 达到 了 前 所 未 有 之 大 。 

面 对 不 断 扩展 的 浏览 器 和 设备 ， 我 们 还 是 有 应 对 方案 的 。 这 个 方案 就 是 基于 HTML5 和 CSS3 
的 响应 式 Web 设 计 。 响 应 式 Web 设 计 可 以 让 一 个 网 站 同时 适 配 多 种 设备 和 多 个 屏幕 ， 可 以 让 网 站 
的 布局 和 功能 随 用 户 的 使 用 环境 (屏幕 大 小 、 输 入 方式 、 设 备 / 浏 览 器 能 力 ) 而 变化 。 

不 仅 如 此 ， 基 于 HTML5 和 CSS3 的 响应 式 Web 设 计 ， 并 不 需要 依赖 服务 端 或 后 端 方案 。 















































1.1 定义 需求 
无 论 你 是 刚刚 接触 响应 式 Web 设 计 、HTML5、CSS3， 还 是 已 经 对 它们 很 熟悉 了 ， 我 都 希望 
本 章 可 以 实现 两 个 目标 。 


如 果 你 已 经 在 自己 的 响应 式 Web 设 计 中 使 用 了 HTMLS 和 CSS3 ， 本 章 可 以 帮 你 快速 做 一 个 回 
顾 。 如 果 你 是 一 位 新 手 ， 可 以 把 这 一 章 看 成 “新 手 训练 营 "”， 它 会 告诉 你 阅读 本 书 所 需 的 一 切 。 


学 完 本 章 ， 你 将 对 实现 响应 式 Web 设 计 有 一 个 全 面 清晰 的 了 解 。 
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有 人 会 问 ， 既 然 如 此 ， 剩 下 9 章 有 什么 用 呢 ? 本 章 最 后 也 会 对 此 给 出 答案 。 
以 下 是 本 章 的 主要 内 容 : 


口 定义 响应 式 Web 设 计 

口 如 何 确定 浏览 器 支持 程度 
OQ 工具 和 文本 编辑 器 

一 个 响应 式 的 例子 

O 视 口 meta 标 签 的 重要 意义 
口 怎么 让 图 片 随 窗口 缩放 

a 用 CSS3 媒 体 查 询 定义 断 点 
口 前 面 例子 的 不 足 之 处 

a 为 什么 学 习 之 旅 才刚 刚 开始 











1.2 ”什么 是 响应 式 Web 设计 


"WSUWSCWebUETE" 3x44 E JEEthan Marcotte 在 2010 年 发 明 的。 当时 ， 他 在 A List Apart 上 写 
了 一 篇 文章 (http:/www.alistapart.com/articles/responsive-web-design/ )， 这 篇 文章 综合 运用 了 三 种 


已 有 技术 (CERNEA EE BLUES RESI) 实现 了 一 个 解决 方案 ， 就 叫 “ 响 应 式 Web 


设计 ”。 

















响应 式 Web 设计 的 由 来 
所 谓 响应 式 Web 设 计 ， 就 是 网 页 内 容 会 随 着 访问 它 的 视 口 及 设备 的 不 同 而 呈现 不 同 的 样式 。 


最 初 ， 响 应 式 设计 是 从 “桌面 "、 固 定 宽度 设计 开始 的 。 然 后 ， 到 了 小 屏幕 上 ， 内 容 会 重 排 ， 
或 者 根据 情况 隐藏 部 分 内 容 。 可 是 ， 随 着 时 间 推 移 ， 人 们 发 现 ， 还 是 采用 相反 的 设计 思路 更 好 ， 
即 先 为 小 屏幕 设计 内 容 、 样 式 ， 然 后 再 向 大 屏幕 扩展 。 


详细 介绍 这 些 情况 之 前 ， 我 们 先 来 看 看 浏览 器 支持 与 文本 编辑 絮 / 工 具 。 























1.3 ”浏览 器 支持 


由 于 响应 式 Web 设 计 已 经 广为人知 ， 所 以 跟 客户 及 相关 方 沟通 变 得 越 来 越 容易 。 提 到 “响应 
式 Web 设 计 ”， 很 多 人 都 表示 知道 怎么 回 事 。 而 写 一 个 项 目 就 可 以 满足 所 有 设备 的 说 法 也 很 有 苋 
争 优 势 。 


不 过 ， 浏 览 器 支持 一 直 是 响应 式 Web 设 计 面临 的 最 大 问题 。 市 面 上 如 此 多 的 浏览 器 和 设备 ， 
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要 想 一 个 不 落地 文 持 并 不 现实 。 有 时 候 是 时 间 问 题 , 有 时 候 是 预算 问题 , 有 时 候 两 方面 问题 都 有 。 
一 般 来 说 , 要 支持 的 浏览 带 版 本 越 早 , 想 达到 现代 浏览 器 中 相同 功能 和 效果 所 需 的 工作 量 就 
越 大 。 因 此 , 最 好 的 做 法 是 先 写 一 个 较 轻 量 的 代码 架构 ,然后 根据 所 需 的 体验 针对 能 力 更 强 的 浏 
览 右 进行 扩展 ， 包 括 视觉 和 功能 。 
本 书 上 一 版 还 花 了 不 少 篇 幅 介 绍 怎么 迎合 老 昌 版 本 的 桌面 浏览 器 。 但 这 一 版 不 会 在 这 方面 浪 
费时 间 了 。 























[ 果 你 必须 考虑 兼容 IE8 甚 至 更 低 版 本 ,在 同情 你 的 遭 
际 之 余 ， 我 必须 坦率 地 告诉 你 ， 这 本 书 里 没 多 少 相 关 的 内 容 可 资 利用 。 


对 于 其 他 人 来 说 ， 应 该 劝告 自己 的 客户 或 老板 ， 告诉 他 们 为 什么 给 那些 “残疾 ”浏览 器 写 代 
码 是 错误 的 ， 而 把 时 间 和 资源 主要 放 在 支持 现代 浏览 器 和 现代 平台 上 才 是 最 明智 的 。 

不 过 到 最 后 , 唯一 重要 的 因素 还 是 你 自己 。 在 通常 情况 下 , 我 们 写 的 网 站 必须 在 所 有 常用 浏 
览 器 里 表现 正常 。 除 了 基本 功能 ， 有 必要 提前 确定 针对 哪个 平台 要 实现 最 强 的 功能 ,以 便 对 其 他 
平台 上 的 视觉 和 功能 作出 相应 取舍 。 


这 是 非常 实际 的 做 法 ， 因 为 从 最 简单 的 “基本 ”体验 开始 ， 逐 步 扩充 ( 所 谓 “ 渐 进 增强 ”) 
更 容易 。 相 反 ， 先 做 出 大 而 全 的 版 本 ,然后 再 针对 能 力 不 足 的 平台 寻找 后 备 方案 (所谓 “ 平 稳 退 
化 ”) 则 要 麻烦 得 多 。 


为 了 进一步 说 明 提前 确定 主要 支持 平台 很 重要 ， 我 们 举 个 例子 。 假 设 你 很 倒霉 ，25% 的 用 户 
都 在 用 IE9， 那 你 必须 考虑 这 个 版 本 的 卫 都 支持 什么 特性 ， 然 后 再 相应 地 剪裁 自己 的 设计 方案 。 
同样 , 如果 有 大 量 用 户 使 用 的 手机 平台 是 Android 2， 你 也 要 考虑 类 似 的 问题 。 不 同 平台 需要 考虑 
的 “基本 ”体验 相差 很 大 。 

如 果 没 有 合适 的 数据 ， 那 么 我 会 按照 一 个 简单 粗暴 的 逻辑 来 决定 是 否 开发 某 个 特定 平台 / 浏 
览 需 的 版 本 : 如 果 支 持 浏览 器 X 的 开发 成 本 超过 了 浏览 右 X 的 用 户 创 造 的 收益 ， 那 么 就 不 为 该 浏 
览 需 开发 特殊 的 版 本 。 


能 不 能 适 配 某 个 旧 平 台 / 版 本 不 是 问题 ， 问 题 在 于 是 否 应 该 去 适 配 它 。 


在 确定 哪些 平台 和 浏览 器 版 本 支持 什么 特性 时 ， 建 议 参 考 这 个 网 站 : http://caniuse.com。 这 
个 网 站 的 界面 简洁 ， 查 询 方 便 。 
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[F] Can 1 use... Support table: x 


€ C D caniuse.com E ma faángesz 














About | News New official browser status info + 3 new features added Compare browsers Index 


Can | use 


CSS HTML5 SVG 


= (Gfont-face Web fonts = Audio element ma Inline SVG in HTML5 

a Blending of HTML/SVG elements = Canvas (basic support) = SVG (basic support) 

= calci) as CSS unit value a Canvas blend modes » SVG effects for HTML. 

= 2.1 selectors = Color input type = SVG filters 

= background-blend-mode = contenteditable attribute (basic support) = SVG fonts 

= background-position edge offsets = Custom Elements = SVG fragment identifiers 
= clip-path property = Datalist element a SVG in CSS backgrounds 
= Counters a dataset & data-* attributes = SVG in HTML img element 
= Feature Queries = Date/time input types = SVG SMIL animation 

a Filter Effects a Details & Summary elements = All SVG features 

= Generated content for pseudo-elements = Dialog element 

= Gradients = Download attribute h 
= Grid Layout » Drag and Drop Other 

= Hyphenation a Form validation = async attribute for external scripts 
= inline-block = getElementsByClassName = classList (DOMTokenlist ) 

* Masks * HTML Imports = Content Security Policy 

= min/max-width/height * HTMLS form features a Data URIs 

= outline = input placeholder attribute = defer attribute for external scripts 
a position:fixed = Multiple file selection a DOMContentLoaded 

= Regions = New semantic elements = ECMAScript 5 Strict Mode 

= Repeating Gradients = Number input type = getComputedStyle 

= resize property = Offline web applications a HTMI tomnlates 








关于 工具 和 文本 编辑 器 


用 什么 文本 编辑 器 或 IDE 来 写 响 应 式 网 站 都 一 样 。 如 果 你 觉得 某 个 简单 的 文本 编辑 器 足够 你 
高 效 编写 HTML 、CSS 和 JavaScript 代 码 ， 那 就 行 啦 。 其 他 工具 也 一 样 ， 没 有 哪个 工具 是 必需 的 。 
只 要 能 让 你 写 HIML 、CSS 和 JavaScript 就 行 。Sublime Text, Vim, Coda, Visual Studio, Notepad, 
选 哪 一 个 都 不 重要 ， 你 喜欢 就 好 。 


不 过 ， 请 大 家 注意 ， 现 在 确实 出 现 了 不 少 新 工具 ( 通常 也 是 免费 的 )。 这 些 工 具 可 以 把 以 往 
需要 竹林 来 做 的 事 自 动 侈 ， 比 如 ，CSS 预 处 理 器 (Sass, LESS, Stylus, PostCSS ) 可 以 帮 有 我 们 组 
织 代码 、 变 量 、 颜 色 操 作 和 数学 运算 。 亿 PostCSS 这 样 的 本 具 可 以 帮 我 们 完成 添加 浏 鉴 器 前 级 这 
样 烦琐 的 任务 。 另 外 ,一些 清 理 和 验证 工具 可 以 帮 我 们 检查 HTML、CSS 和 JavaScript 代 码 是 否 符 
合 标 准 ， 自 动 提示 输入 错误 和 语法 错误 。 


新 工具 始终 在 不 断 涌现 ,而 且 会 不 断 改进 。 虽然 本 书 有 时 会 提 到 一 些 有 用 工具 的 名 字 , 但 并 
不 代表 对 你 来 说 最 合适 ， 你 应 该 去 找 最 适合 自己 的 。 事实 上 ， 本 书 的 示例 除了 HTML 和 CSS 标 准 
之 外 ， 不 依赖 任何 工具 。 至 于 怎么 利用 前 端 工具 让 自己 的 代码 更 快 更 可 靠 ， 那 是 你 的 事 。 





1.4 第 一 个 响应 式 的 例子 
本 章 开 头 承诺 让 你 在 学 完 这 一 章 之 后 ， 了 解 所 有 与 响应 式 Web 设 计 相 关 的 知识 。 前 面 我 们 讨 
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论 的 都 是 一 些 相关 话题 ， 现 在 该 付 诸 行动 了 。 


hub.com/benfrain/rwd 请 注意 ， 下 载 到 的 代码 只 包含 每 个 示例 的 最 终 版 本 。 比 


代码 示例 
ŞS 下 载 本 书 示例 代码 的 地 址 是 : http:/rwd.education/download.zip X https://git- 
如 ， 第 2 章 的 例子 是 第 2 章 结 束 时 的 状态 ， 而 不 是 该 章 中 间 部 分 的 某 个 状态 。 


1.4.1 HTML 


先 从 HTML5 结 构 讲 起 。 大 家 先 不 要 着 急 理 解 每 一 行 代码 的 用 途 〈 特 别 是 <heaaq> 中 的 代码 )， 
第 4 章 会 详细 介绍 它们 。 


现在 ， 我 们 只 关注 <boqy> 标 签 中 的 元 素 。 必 须 承认 ， 现 在 的 网 页 看 起 来 一 点 也 不 特别 ， 只 
有 几 个 DIV、 一 张 LOGO 图 、 一 张 图 片 〈 看 起 来 很 好 吃 的 松 饼 )、 一 两 段 文 本 和 一 个 项 目 列表 。 


以 下 是 删节 后 的 代码 。 为 简单 起 见 , 段落 中 的 文字 已 经 隐藏 了 , 因为 我 们 要 关注 的 只 是 结构 。 
只 要 知道 那些 文字 介绍 了 怎么 制作 标准 的 英 式 松 饼 就 行 了 


如 果 想 看 完整 的 HTML 文 件 ， 请 解压 下 载 后 的 代码 。 


<!doctype html» 
«html class-"no-js" lang-"en"» 
«head» 
«meta charset-"utf-8"» 
«title»Our first responsive web page with HTML5 and CSS3«/ 

















title» 
«meta name-"description" content-"A basic responsive web page 
—- an example from Chapter 1"> 
«link rel="stylesheet" href-"css/styles.css"» 
</head> 
<body> 
<div class="Header"> 
«a href="/" class-"LogoWrapper"»«img src-"img/SOC-Logo. 
png" alt-"Scone O'Clock logo" /»«/a» 
«p class-"Strap"»Scones: the most resplendent of snacks«/ 
p» 
«/div» 
«div class-"IntroWrapper"» 
«p class-"IntroText"»Occasionally maligned and 
misunderstood; the scone is a quintessentially British classic.«/p» 
«div class-"MoneyShot"» 
«img class-"MoneyShotImg" src-"img/scones.jpg" 
alt-"Incredible scones" /> 
«p class-"ImageCaption"»Incredible scones, picture 
from Wikipediac/p» 
«/div» 
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</div> 


<p>Recipe and serving suggestions follow.</p> 
«div class-"Ingredients"-» 


«h3 class-"SubHeader"»Ingredients«/h3» 
«ul» 


«/ul» 

</div> 

<div class="HowToMake"> 
«h3 class="SubHeader">Method</h3> 
«ol class="MethodWrapper"> 


</ol> 
</div> 
</body> 
</html> 


默认 情况 下 ， 网 页 布局 是 弹性 的 。 就 它 现在 这 个 样子 把 它 打开 ( 还 不 包含 媒体 查询 )， 缩 放 
浏览 器 窗口 ， 你 会 看 见 文本 会 根据 屏幕 缩放 自动 重 排 。 




















[È 


























lki 





那 换 个 设备 怎么 样 呢 ? 在 没有 CSS 的 情况 下 ，iPhone 中 的 效果 如 下 图 所 示 。 
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在 iPhone 中 也 是 一 个 “正常 的 ”网 页 。 这 是 因为 iOS 默 认 会 按 980 像 素 宽 度 来 泻 染 网 页 ， 然 后 
再 把 页 面 缩小 呈现 在 视 口 当 中 。 


浏览 器 中 用 于 呈现 网 页 的 区 域 叫 视 口 (viewport )。 视 口 通常 并 不 等 于 屏幕 大 小 ,特别 是 可 以 
缩放 浏览 器 窗口 的 情况 下 。 


因此 ， 从 现在 开始 ， 我 们 会 使 用 这 个 准确 的 术语 指 代 可 以 呈现 网 页 的 区 域 。 
为 了 解决 前 面 的 问题 ， 可 以 在 网 页 的 <head> 中 添加 下 面 这 行 代码 : 









































<meta name="viewport" content="width=device-width"> 

这 个 视 口 的 <meta> 标 签 是 一 种 非 标 准 的 (但 却 是 事实 标准 的 ) 方式 ， 它 告诉 浏览 器 怎么 泻 
染 网 页 。 在 这 里 ，<meta> 标 签 想 表达 的 意思 是 : 按照 设备 的 宽度 ( device-wigth ) 来 泻 染 网 
页 内 容 。 事 实 上 ， 在 支持 这 个 标签 的 设备 上 给 你 看 一 看 效果 ， 你 就 明白 了 。 
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localhost 


Scones: the most resplendent of snacks 


Occasionally maligned and misunderstood; the 
scone is a quintessentially British classic. 


Recipe and serving suggestions follow. 


Ingredients 


350g self-raising flour, and a little spare 
for dusting 

y tsp salt 

1 tsp baking powder 

85g butter, cut into cubes 

3 tbsp caster sugar 


EE I ES 

















不 错 呀 ! 现在 ， 网 页 中 的 文字 看 起 来 更 有 “原生 ”的 感 党 了 。 我 们 继续 。 
第 2 章 在 介绍 媒体 查询 的 时 候 还 会 详细 讨论 <meta> 标 签 的 更 多 设置 和 组 合用 法 。 
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14.2 图片 
有 人 说 “一 图 胜 千 言 "， 确 实 如 此 。 我 们 网 页 中 关于 松 饼 的 文字 介绍 再 多 ， 也 没有 图 片 有 吸 


引力 。 下 面 我 们 就 在 页 面 上 方 添加 一 张 松 饼 的 图 片 ， 效 果 类 似 引诱 用 户 往 下 看 的 大 题 图 。 
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哇 ， 真 是 好 大 一 张 图 ( 2000 像 素 宽 )， 它 让 整个 网 页 看 起 来 都 失衡 了 。 不 行 ， 必 须 解决 这 个 
固定 宽度 ， 但 问题 是 我 们 想 让 它 能 在 不 同 大 小 的 屏幕 中 自动 缩放 。 


我 们 把 图 片 设 置 成 320 像 素 宽 ， 那 么 
名 ， 只 要 一 行 CSS 








问题 。 可 以 用 CSS 给 图 片 指定 


比如 ， 我 们 例子 中 的 iPhone 屏幕 宽度 为 320 像 素 ， 如 屋 
iPhone 屏幕 旋转 后 又 怎么 办 呢 ? 这 时 候 320 像 素 变 成 了 480 像 素 。 解 决 方案 很 简 身 


代码 就 可 以 让 图 片 随 容 器 宽度 自动 缩放 。 
在 这 里 我 们 创建 一 个 CSS 文 件 : css/styles.css， 将 它 链 接 到 HTML 页 面 的 头 部 。 
以 下 是 我 们 在 这 个 CSS 文 件 中 写 的 代码 。 一 般 来 说 ， 应 该 先 设置 一 些 默认 值 ， 这 些 话题 后 面 
几 章 我 们 再 讨论 。 现 在 我 们 就 加 入 这 点 代码 ; 























img ( 
max-width: 100$; 


} 
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回 到 手机 上 ， 刷 新 页 面 ， 结 果 比 较 符 合 预期 了 。 
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OC 


Scones: the most resplendent of snacks 


Occasionally maligned and misunderstood; the 
scone is a quintessentially British classic. 


A eem P 
^ 
Incredible scones, picture from Wikipedia 


rm. t 






































这 里 声明 max-wiath 规 则 ， 就 是 要 保证 所 有 图 片 最 大 显示 为 其 自身 的 100% ( 即 最 大 只 可 以 
显示 为 自身 那么 大 )。 此 时 ， 如 果 包 含 图 片 的 元 素 〈 比如 包含 图 片 的 body 或 aiv ) 比 图 片 固 有 宽 
度 小 ， 图 片 会 缩放 占 满 最 大 可 用 空间 。 




















为 什么 不 用 wiath:100%? 


a 要 实现 图 片 的 自动 缩放 ， 也 可 以 使 用 更 通用 的 width 属性 ， 比 如 
Q width:100%。 然 而 ， 这 条 规则 在 这 里 的 效果 不 同 。 如 果 给 width 属 性 设置 一 个 
i, 那么 图 片 就 会 按照 该 值 显示 , 不 考虑 自身 固有 宽度 。 以 我 们 例子 中 的 LOGO 
( 同样 也 是 一 张 图 片 ) 为 例 ， 这 条 规则 会 导致 它 显 示 得 跟 它 的 容器 一 样 宽 。 在 容 
器 比 图 片 宽 得 多 的 情况 下 (就 像 我 们 这 里 的 LOGO 一 样 ), 图片 会 被 无 谓 地 拉 伸 。 





很 好 , 现在 图 片 和 文本 都 显示 正常 了 。 不 管 视 口 多 大 , 至 少 水 平方 向 上 再 也 没有 内 容 溢出 了 


再 回 过 头 来 在 较 大 的 视 口 中 看 看 效果 。 下 图 是 在 视 口 宽度 大 约 为 1400 像 素 下 看 到 的 效果 , 基 
本 样式 下 的 文本 和 图 片 明显 被 拉 长 了 。 


























Di 
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SOC 


Scones: the most resplendent of snacks 


maligned and misunderstood; the scone is a quintessentially British classic. 
s | 
me. ` 
ns ota 
RS. 
E AESA 
X. a 


T t 
dc 


Occasior 

















这 可 不 行 ! 事实 上 ， 视 口 宽度 达到 600 像 素 时 ， 效 果 就 不 好 了 。 在 这 个 宽度 上 ， 如 果 我 们 可 
以 对 某 些 元 素 进行 重 排 , 也 许可 以 有 所 改进 ， 比 如 调整 图 片 大 小 并 将 其 放置 在 一 侧 , 或 修改 某 些 
元 素 的 字体 大 小 和 背影 颜色 。 


没 问 题 ， 使 用 CSS 媒 体 查 询 可 以 轻易 实现 我 们 说 的 所 有 功能 。 


1.4.3 ”媒体 查询 


我 们 知道 ， 当 视 口 宽度 超过 600 像 素 时 ， 当 前 的 页 面 布局 存在 被 严重 拉 伸 的 问题 。 下 面 我 们 
就 使 用 CSS3 的 媒体 查询 根据 屏幕 宽度 来 调整 布局 。 媒 体 查 询 可 以 让 我 们 在 某 些 条 件 下 ( 如 宽度 
和 高 度 为 多 少 的 情况 下 ) 为 网 页 应 用 样式 。 














不 针对 流行 的 设备 宽度 设置 断 点 


所 谓 “ 断 点 "”， 就 是 某 个 宽度 临界 点 ， 跨 过 这 个 点 布局 就 会 发 生 显著 变化 。 
人 们 在 刚 开 始 使 用 媒体 查询 的 时 候 ， 经 常会 针对 当时 流行 的 设备 设置 断 点 。 
当时 ，iPhone ( 320 像 素 x 480 像 素 ) 和 iPad ( 768 像 素 x 1024 像 素 ) 的 宽度 决定 


~ TBE 
Q 不 过 ， 当 时 那样 做 并 不 好 ， 现 在 来 看 就 更 不 可 取 了 。 这 是 因为 这 样 实 际 上 
把 设计 跟 特定 的 屏幕 大 小 绑 定 了 。 了 既然 是 响应 式 设计 ， 那 应 该 与 显示 它 的 设备 
无 关 才 对 ， 而 不 是 只 在 某 些 屏幕 中 才 最 合适 。 
断 点 应 该 由 内 容 和 设计 本 身 决 定 。 比 如 你 的 设计 可 能 在 500 像 素 或 更 宽 的 时 
候 看 起 来 就 不 对 了 ， 当 然 也 许 是 800 像 素 。 总 之 ， 断 点 应 该 由 你 自己 的 项 目 设计 
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第 2 章 将 全 面 介绍 媒体 查询 ， 因 此 “媒体 查询 ”也 是 那 一 章 的 名 字 。 


不 过 , 为 了 说 明 如 何 改进 我 们 的 设计 , 这 里 可 以 只 关注 一 种 媒体 查询 , 即 最 小 宽度 媒体 查询 。 
在 这 个 媒体 查询 中 设置 的 CSS 规 则 ， 只 在 视 口 符合 最 小 定义 宽度 条 件 时 才 会 应 用 到 网 页 。 实 际 的 
最 小 宽度 可 以 使 用 不 同 的 长 度 单位 指定 ， 比 如 百分比 、em、rem 和 px。 在 CSS 中 ， 最 小 宽度 媒体 
查询 是 这 样 写 的 : 












































Qmedia screen and (min-width: 50em) ( 
/* 样式 */ 
} 
emedia 指 令 告 诉 浏览 器 这 里 是 一 个 媒体 查询 ，screen (技术 上 讲 ， 不 需要 在 这 里 声明 “ 
幕 ”"， 具 体 细节 请 参考 下 一 章 ) 告诉 浏览 器 这 里 的 规则 只 适用 于 屏幕 类 型 ,而 ang (min-width: 
50em) 的 意思 是 其 中 的 规则 只 适用 于 视 口 宽度 在 50em 以 上 的 情况 。 











A 

















Bryan Rieger 第 一 次 指出 ( http://www.slideshare.net/bryanrieger/rethinking-the- 
mobile-web-by-yiibu ): 


Q “没有 媒体 查询 本 身 就 是 媒体 查询 。 


这 各 话 的 意思 就 是 ， 我 们 在 媒体 查询 外 面 写 的 第 一 条 规则 ， 实 际 上 是 针对 
所 有 媒体 的 “基本 ”样式 。 在 此 基础 上 ， 可 以 再 针对 不 同 能 力 的 设备 加 以 扩展 。 





现在 ， 只 要 知道 应 该 以 最 小 屏幕 为 起 点 ， 然 后 再 根据 需求 渐进 扩充 视觉 和 功能 即 可 。 
针对 更 大 的 屏幕 做 修改 


我 们 知道 ， 视 口 宽度 达到 600 像 素 (或 37.5rem ) 时 ， 布 局 就 会 显得 很 难看 。 下 面 我 们 再 通 
一 个 例子 ,来 展示 怎么 根据 视 口 大 小 实现 不 同 的 布局 。 











E; 

















M 基本 上 所 有 浏览 器 默认 的 文本 大 小 都 是 16 像 素 ， 因 此 用 像素 值 除 以 16 就 可 
以 得 到 rem 值 。 第 2 章 会 进一步 介绍 为 什么 需要 这 样 做 。 








首先 ,不 让 题 图 太 大 ， 而 是 把 它 挪 到 右 侧 去 。 然 后 把 介绍 文字 放 在 图 的 左 侧 。 


然后 , 再 把 主要 的 文本 内 容 , 也 就 是 如 何 制 作 松 饼 的 方法 , 放 在 位 于 右 侧 带 框 线 的 配料 表 左 
下 方 。 


这 些 样式 调整 都 可 以 封装 到 一 个 媒体 查询 当中 。 下 图 就 是 调整 之 后 的 效果 。 
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| © Our first responsive web ;. x 


€ c localhost:8888 x 


SOC 


Scones: the most resplendent of snacks 


Occasionally maligned and 
misunderstood; the scone is 
a quintessentially British 
classic. 





Recipe and serving suggestions follow. 


done, stir in the sugar. 


squeeze lemon juice (see Know-how below) 
beaten egg, to glaze 


Method Ingredients 
" . 。 350g self-raising flour, and a little spare for dusting 
1. Heat the oven to 220°C (or gas mark 7). Tip the flour into a * M4 tsp salt 
large bowl along with the salt and baking powder, then mix : Fortes, Lives iet 
it all up. Add the butter in, then rub the butter in with your * 3 tbsp caster sugar 
fingers until the mix looks like fine crumbs. When that is erem ex 


2. Put the milk into a jug and heat in the microwave for about en and cloted Gita, W serve 


20-30 seconds. It should be warm but not hot. Add the 
vanilla and lemon juice to the milk and then put that to one 
side and but a baking tray in the oven to warm. 





3. Make a well in the dry mix, then add the liquid and combine it quickly with a cutlery knife — it will seem 











完成 之 后 的 页 面 在 较 小 的 屏幕 上 还 和 以 前 一 样 ， 只 是 在 视 口 宽度 大 于 50rem 时 ， 就 会 调整 为 
新 的 布局 。 


以 下 是 我 们 添加 的 布局 样式 : 


Gmedia screen and (min-width: 
.IntroWrapper { 
display: table; 
table-layout: fixed; 
width: 100$; 


50rem) { 


.MoneyShot, 

.IntroText { 
display: table-cell; 
width: 50$; 
vertical-align: middle; 
text-align: center; 





.IntroText { 
padding: 
font-size: 
text-align: 


.brem; 
2.5rem; 
left; 
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.Ingredients { 


font-size: .9rem; 


float: right; 


padding: lrem; 


margin: 0 0 .5rem 1rem; 


border-radius: 


3px; 


background-color: #ffffdf; 
border: 2px solid #e8cfa9; 


} 


.Ingredients h3 ( 
margin: 0; 
j 
} 








还 算 不 错 ， 是 吧 ? 





是 吧 ? 只 用 了 少量 代码 ,就 让 页 面 实现 了 对 视 口 宽度 变化 的 响应 , 为 用 户 
更 实用 的 外 观 。 有 了 这 些 媒 体 查 询 样 式 ， 在 iPhone 上 我 们 看 到 的 页 面 如 下 : 


-E 
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SOC 


Scones: the most resplendent of snacks 


Occasionally maligned 
and misunderstood; the 
scone is a quintessentially 
British classic. 








而 在 50rem 宽 时 ， 页 面 效 果 如 下 : 





现 了 
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SOC 


Scones: the most resplendent of snacks 


Occasionally maligned -y 
- e e : » | 


and misunderstood; the A 
scone is a quintessentially 
British classic. 





{~w 
Recipe and serving suggestions follow. 
Method EELEE 
. : * 350g self-raising flour, and a little spare for dusting 
1. Heat the oven to 220°C (or gas mark 7). Tip the flour * V tsp salt 
into a large bowl along with the salt and baking $ Lp taking poudar 
UT : * 85g butter, cut into cubes 

powder, then mix it all up. Add the butter in, then rub © 3 tbsp caster sugar 

the butter in with your fingers until the mix looks like * 175ml milk 

fi 二 bs. When that is done. stir in the * 1 tsp vanilla extract 

ine crumbs. n that is done, stir in the sugar. e squeeze lemon juice (see Know-how below) 


* beaten egg, to glaze 
* jam and clotted cream, to serve 


2. Put the milk into a jug and heat in the microwave for 
about 20-30 seconds. It should be warm but not hot. Add the vanilla and lemon juice to the milk and 
then put that to one side and but a baking tray in the oven to warm. 














添加 更 多 装饰 对 我 们 理解 什么 是 渐进 增强 并 没有 什么 意义 ,因此 这 里 就 省 略 了 。 如 果 你 想 查 
看 相关 代码 ， 可 以 解压 下 载 的 示例 代码 。 


虽然 这 个 例子 本 身 很 简单 ， 但 它 已 经 涵盖 了 响应 式 Web 设 计 的 基本 方法 。 


总 结 一 下 我 们 介绍 的 基本 内 容 。 首 先是 “基本 的 ”样式 ， 它 适用 于 任何 设备 。 在 这 个 样式 基 
础 上 ， 我们 再 为 不 同 视 口 、 不 同 能 力 的 设备 ， 渐 进 增加 不 同 的 视觉 效果 和 功能 。 














CSS 媒 体 查 询 的 (3 级 ) 规范 在 这 里 : https://www.w3.org/TR/css3-media- 
^ | queries/, 
CNN | 
还 有 一 个 CSS 媒 体 查询 ( 4 级 ) 的 草案 : http://dev.w3.org/csswg/media- 


queries-4/。 


1.5 示例 的 不 足 之 处 
本 章 介 绍 了 使 用 HTML5 和 CSS3 实 现 响应 式 Web 设 计 相 关 的 所 有 基本 要 素 。 
我 们 都 知道 ， 前 面 的 示例 远 远 不 能 涵盖 我 们 想 要 实现 的 目标 ， 同样 也 不 代表 我 们 只 能 做 到 
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如 果 我 们 想 让 网 页 响应 环境 光线 的 变化 呢 ? 如 果 我 们 想 在 用 户 使 用 不 同 输入 设备 (手指 而 不 
是 鼠标 ) 时 改变 链接 大 小 呢 ? 如 果 我 们 想 只 用 CSS 实 现 动画 和 元 素 移 动 效果 呢 ? 


还 有 标记 。 怎 么 使 用 标记 来 构建 页 面 ， 才 能 保证 所 有 元 素 都 具有 语义 ， 比 如 article、 
section、menu， 或 者 怎么 让 表单 内 置 支 持 验证 〈 不 需要 JavaScript 参 与 ) ? 怎么 实现 在 不 同 视 
口中 修改 元 素 显 示 的 次 序 呢 ? 


别 忘 了 图 片 。 这 个 示例 中 使 用 了 弹性 图 片 ,， 可 是 如 果 用 户 使 用 手机 查看 页 面 , 那么 他 会 下 载 
一 个 很 大 的 图 片 ( 至 少 2000 像 素 以 上 )， 而 在 屏幕 上 又 只 能 缩 成 几 分 之 一 显示 。 这 样 页 面 会 显得 
很 卡 。 还 有 更 好 的 办 法 吗 ? 

还 有 LOGO 和 图 标 呢 。 这 个 示例 使 用 的 是 PNG 图 片 ， 但 使 用 SVG (Scalable Vector Graphics, 
可 伸缩 矢量 图 ) 可 以 简单 地 适用 各 种 分 辨 率 。SVG 图 形 看 起 来 非常 清晰 ， 无 论 使 用 什么 屏幕 。 


好 在 你 还 在 看 这 本 书 ， 这 些 问题 的 答案 将 在 后 续 章 节 中 陆续 揭晓 。 





















































1.6 小结 

收获 不 小 吧 ， 这 一 章 让 你 了 解 响应 式 Web 设 计 相 关 的 所 有 基本 要 素 。 不 过 ， 正 像 我 们 刚刚 说 
过 的 ， 还 有 很 多 方面 存在 不 小 的 改进 空间 。 

其 实 还 不 够 ， 因 为 我 们 不 只 想 要 掌握 响应 式 Web 设 计 的 全 部 技能 ， 更 想 给 用 户 提 供 最 刺激 的 
体验 。 所 以 还 得 继续 学 习 。 

首先 ,我 们 必须 知道 CSS 媒 体 查 询 的 3 级 和 4 级 标准 都 提供 了 哪些 特性 。 我 们 看 到 了 怎么 让 网 
页 响应 视 口 宽度 变化 , 但 我 们 可 以 做 的 远 远 不 止 这 一 点 , 稍 后 还 将 有 更 精彩 的 内 容 纷 至 省 来 。 赶 
紧 翻 到 下 一 章 去 看 看 吧 。 




















d s 


媒体 查询 








上 一 章 ， 我们 快速 地 介绍 了 响应 式 网 页 相关 的 基本 要 素 : 弹性 布局 、 弹 性 图 片 和 媒体 查询 。 
本 章 详 尽 介 绍 媒 体 查 询 ， 希 望 大 家 能 完全 掌握 它 的 能 力 、 语 法 及 未 来 动向 。 


a 为 什么 响应 式 Web 设 计 和 需要 媒体 查询 

口 媒体 查询 的 语法 

O 如 何在 link 标 签 、e@import 语 句 和 CSS 文 件 中 使 用 媒体 查询 
口 可 供 测 试 的 设备 特性 

口 使 用 媒体 查询 根据 屏幕 空间 大 小 调整 视觉 效果 

a 应 该 把 媒体 查询 写 在 一 块 ， 还 是 哪里 需要 写 在 哪里 

口 理解 meta 视 口 标 签 如 何 针对 iOS 和 安 卓 设备 启用 媒体 查询 

口 媒体 查询 未 来 可 能 拥有 什么 特性 






































SS 利用 煤 体 查询 ， 可 以 根据 设 
备 的 能 力 应 用 特定 的 CSS 样 式 。 比 如 ， 可 以 根据 视 口 宽度 、 屏 幕 宽 高 比 和 朝向 (水平 还 是 垂直 ) 
等 ， 























只 用 几 行 CSS 代 码 就 改变 内 容 的 显示 方式 。 


媒体 查询 得 到 了 广泛 实现 BITES CEEDICTSRURSO JUSP BEES, — 19) 
没有 理由 不 用 它 ! 





W3C 制 定 规范 要 走 一 个 批准 流程 。 如 果 有 空 ， 可 以 读 读 他 们 的 官方 流程 文 
Ji: https:/www.w3.org/2005/10/Process-20051014/tr。 简 单 来 说 ， 所 有 规范 都 从 


WD ( Working Draft， 工 作 草 案 ) 开始 ， 然 后 是 CR (Candidate Recommendation, 
4 


Q 候选 推荐 )， 接 着 是 PR (Proposed Recommendation, ÆRA ), ipei 能 


为 W3CREC (Recommendation ， 推 荐 标准 )。 处 于 较 成 熟 阶段 的 模块 ,通常 使 用 
起 来 也 比较 安全 。 比 如 ，CSS Transforms Module Level 3 ( http://www.w3.org/ 
TR/css3-3d-transforms/ ) 在 2009 年 3 月 就 进入 了 WD 阶段 , 但 浏览 器 对 它 的 支持 度 
比 处 于 CR 阶段 的 媒体 查询 等 模块 差 得 多 。 
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2.1 为 什么 响应 式 Web 设计 需要 媒体 查询 





翻 开 W3C 
的 CSS3 媒 体 查询 模块 的 规范 ( https//www.w3.org/TR/css3-mediaqueries/ )， 可 以 看 到 官方 给 媒体 
查询 下 的 定义 : 


“媒体 查询 包含 媒体 类 型 和 零 个 或 多 个 检测 媒体 特性 的 表达 式 。width、height 和 

color 都 是 可 用 于 媒体 查询 的 特性 。 使 用 媒体 查询 ， 可 以 不 必修 改 内 容 本 身 ， 而 让 网 页 

适 配 不 同 的 设备 。 

如 果 没 有 媒体 查询 ， 光 用 CSS 是 无 法 大 大 修改 网 页 外 观 的 。 这 个 模块 让 我 们 可 以 提前 编写 出 
适应 很 多 不 可 预测 因素 的 CSS 规 则 ， 比 如 屏幕 方向 水 平 或 垂直 、 视 口 或 大 或 小 ， 等 等 。 

弹性 布局 虽然 可 以 让 设计 适应 较 多 场景 , 也 包括 某 些 尺 寸 的 屏幕 ,但 有 时 候 确实 不 够 用 ， 
为 我 们 还 需要 对 布局 进行 更 细致 的 调整 。 媒 体 查 询 让 这 一 切 成 为 可 能 ， 它 就 相当 于 CSS 中 基本 的 
AKTEXESR 


























CSS 中 基本 的 条 件 逻 辑 


真正 的 编程 语言 都 有 相应 的 语法 构造 处 理 一 个 或 多 个 条 件 分 文 。 这 时 候 通常 指 的 就 是 条 件 逻 
辑 ， 比 如 if/else 语 句 。 


如 果 提 到 编程 你 就 心 塞 , 大 可 不 必 ! 这 里 要 讲 的 只 一 个 非常 简单 的 概念 。 日常 生活 中 ,你 可 
能 会 在 朋友 排队 买 咖啡 时 这 么 跟 他 说 :“ 如 果 他 们 有 三 重 巧 殉 力 松 饼 ， 给 我 严 一 份 ; 如 果 没有 ， 
就 给 我 买 一 份 胡 葛 卜 蛋 糕 。” 这 就 是 有 两 种 可 能 结果 的 条 件 语句 。 


在 写作 本 书 时 ，CSS 并 不 支持 真正 的 条 件 逮 辑 或 可 编程 特性 。 循 环 、 函 数 、 迭 代 和 复杂 的 数 
学 计算 仍然 只 可 能 在 CSS 预 处 理 右 中 看 到 (我 可 曾 提 过 一 本 不 错 的 专门 讲 Sass 预 处 理 器 的 书 一 一 
《Sass 和 Compass 设 计 师 指南 》? )。 不 过 ， 媒 体 查询 确实 具有 在 CSS 中 实现 条 件 逻 辑 的 能 力 。 使 用 
媒体 查询 ， 其 中 的 样式 只 在 某 些 条 件 具 备 的 情况 下 才 会 被 应 用 。 









































可 编程 的 方式 会 有 的 
CSS 预 处 理 器 的 流行 已 经 引起 CSS 规 范 编写 者 的 注意 。 目 前 已 经 有 了 一 个 关 
a 


于 CSS 变 量 的 WD: https://www.w3.org/TR/css-variables/ 


不 过 ， 现 在 只 有 Firefox 支 持 这 个 建议 ， 因 此 还 不 具备 普遍 意义 。 








2.2 媒体 查询 的 语法 
说 了 那么 多 ， 媒 体 查 询 的 语法 是 什么 样 的 ， 还 有 更 重要 的 ， 媒 体 查 询 怎 么 起 作用 呢 ? 





























在 任何 CSS 文 件 的 最 后 输入 以 下 代码 ， 然 后 打开 引用 该 CSS 文 件 的 网 页 看 看 效果 。 如 果 不 想 
写 代码 ， 也 可 以 直接 打开 本 书 示 例 example_02-01: 
body { 


background-color: grey; 


} 


Qmedia screen and (min-width: 320px) { 
body { 
background-color: green; 
j 
} 
@media screen and (min-width: 550px) { 
body { 
background-color: yellow; 
j 
} 
@media screen and (min-width: 768px) { 
body { 
background-color: orange; 
j 
} 
@media screen and (min-width: 960px) { 
body { 
background-color: red; 
j 
} 


好 了 , 在 浏览 锅 中 打开 网 页 ， 缩 放 窗口 并 看 看 效果 。 页 面 的 背景 颜色 会 随 着 当前 视 口 大 小 的 
变化 而 变化 。 稍 后 我 们 会 介绍 这 些 语法 如 何 起 作用 。 但 首先 ,关键 是 得 知道 如 何以 及 在 哪里 可 以 
使 用 媒体 查询 。 














f£ link 标签 中 使 用 媒体 查询 


从 CSS2 开 始 接触 CSS 的 读者 都 知道 ， 可 以 在 <1ink> 标 签 的 media 属 性 中 指定 设备 类 型 
( screen 或 print )， 为 不 同 设 备 应 用 样式 表 。 看 一 个 例子 (可 以 把 它 放 在 <nheadq> 标 签 中 ): 











«link rel-"style sheet" type-"text/css" media-"screen" href-"screenstyles. 
CSS"> 


媒体 查询 更 进一步 ， 不 仅 可 以 指定 设备 类 型 ， 还 能 指定 设备 的 能 力 和 特性 。 可 以 将 其 想象 
为 对 浏览 需 的 询问 。 如 果 浏 览 需 回 答 “是 ”, 那么 就 会 应 用 对 应 的 样式 表 。 如 果 浏 览 需 回答 “ 否 ”， 
就 不 会 应 用 。 除 了 问 浏览 器:“ 你 是 在 有 屏幕 的 设备 上 吗 ? ”( CSS2 里 只 能 如 此 )， 媒 体 查 询 可 
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以 问 更 多 细节 ， 比 如 可 以 问 :“ 你 是 在 有 屏幕 的 设备 上 ， 而 且 设备 是 垂直 朝向 的 吗 ” ”下面 看 看 
代码 : 


<link rel="stylesheet" media="screen and (orientation: portrait)" 
href="portrait-screen.css" /> 


首先 ， 媒体 查询 表达 式 询问 了 设备 的 类 型 ( 是 屏幕 设备 吗 ? )， 然 后 又 询问 特性 〈 你 的 屏幕 
是 垂直 方向 吗 ? )。 显 然 ， 样 式 表 portrait-screen.css 会 应 用 给 任何 有 屏幕 且 屏 幕 方向 垂直 的 设备 ， 
而 不 符合 这 两 个 条 件 的 设备 则 不 会 获得 其 样式 。 如 果 在 媒体 查询 表达 式 的 开头 添加 一 个 not ， 就 
可 以 把 询问 的 条 件 反 过 来 。 比 如 ,以 下 代码 的 结果 与 前 面 的 例子 相反 ， 只 会 将 样式 表 应 用 给 垂直 
朝向 的 非 屏 幕 设备 : 


«link rel-"stylesheet" media-"not screen and (orientation: portrait)" 
href-"portrait-screen.css" /> 

































































2.3 组 合 媒体 查询 


可 以 将 多 个 媒体 查询 串 在 一 起 。 比 如 , 在 前 面 一 个 示例 的 基础 上 ， 可 以 进一步 限制 只 把 样式 
表 应 用 给 视 口 大 于 800 像 素 的 设备 : 


«link rel-"stylesheet" media-"screen and (orientation: portrait) and 
(min-width: 800px)" href-"800wide-portrait-screen.css" /» 


此 外 , 可 以 组 合 多 个 媒体 查询 。 只 要 其 中 任何 一 个 媒体 查询 表达 式 为 真 ,就 会 应 用 样式 ; 如 
果 没 有 一 个 为 真 ， 则 样式 表 没 用 。 下 面 看 代码 : 


«link rel-"stylesheet" media-"screen and (orientation: portrait) and 
(min-width: 800px), projection" href-"800wide-portrait-screen.css" /> 














这 里 有 两 点 需要 强调 一 下 。 首先 , 逗号 分 隔 每 个 媒体 查询 表达 式 。 其 次 , 在 brojection( 投 
BL) 之 后 没有 任何 特性 / 值 对 。 这 样 省 略 特定 的 特性 ， 表 示 适 用 于 具备 任何 特性 的 该 媒体 类 型 。 
在 这 里 ， 表 示 可 以 适用 于 任何 投影 机 。 


HL, 任何 CSS 长 度 单位 都 可 以 用 来 指定 媒体 查询 的 条 件 。 像素 (px ) 是 最 
常用 的 ,而 em 或 rem 也 都 可 以 用 。 要 了 解 这 些 单位 的 更 多 信息 ,可 以 参考 我 的 一 
M 
篇 文章 : http;//benfrain.com/just-use-pixels., 


假设 你 想 在 800 像 素 处 设置 断 点 ， 但 又 想 用 em 单位 ， 可 以 用 800 除 以 16， 就 
X 50em, 
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2.3.4 Gimport 与 媒体 查询 


可 以 在 使 用 eimport 导 入 CSS 时 使 用 媒体 查询 ， 有 条 件 地 向 当前 样式 表 中 加 载 其 他 样式 表 。 
比如 ， 以 下 代码 会 导入 样式 表 phone.css， 但 条 件 是 必须 是 屏幕 设备 ， 而 且 视 口 不 超过 360 像 素 : 

















Gimport url("phone.css") screen and (max-width:360px); 


记 作 ， 使 用 CSS 中 的 eimport 会 增加 HTTP 请 求 ( 进而 影响 加 载 速度 )， 因 此 请 慎 用 。 


2.3.2 在 CSS 中 使 用 媒体 查询 
前 面 我 们 介绍 在 了 <headq> 标 签 中 引入 CSS 文 件 , 以 及 通过 eimport 引 入 CSS 文 件 时 使 用 媒体 


查询 , 这 两 种 方式 都 是 链接 样式 的 场景 。 但 更 党 网 的 是 在 G8 详 件 内 部 直接 合用 媒体 大 漳 , 比 如 ， 
如 果 把 以 下 代码 包含 进 一 个 样式 表 ， 它 会 在 屏幕 设备 的 宽度 为 400 像 素 及 以 下 时 把 所 有 hi 元 素 变 
成 绿色 : 

@media screen and (max-device-width: 400px) { 


hi { color: green } 


) 

首先 使 用 emedia 规 则 声明 这 是 一 个 媒体 查询 , 然后 指定 匹配 的 设备 类 型 。 在 前 面 的 例子 中 ， 
我 们 想 把 后 面 的 样式 应 用 给 屏幕 设备 ( 而 不 是 打印 设备 ， 即 print )。 然后 在 后 面 的 括号 中 ， 进 
一 步 指定 查询 条 件 。 最 后 ， 跟 编写 其 他 样式 一 样 ， 把 CSS 规 则 写 在 一 对 花 括号 中 。 


此 时 此 刻 ， 我 得 敬告 各 位 : 多 数 情 况 下 ， 并 不 需要 指定 screen。 为 什么 呢 ? 大 家 看 规范 是 
怎么 说 的 : 
“在 针对 所 有 设备 的 媒体 查询 中 ， 可 以 使 用 简写 语法 ， 即 省 略 关键 字 all (以 及 紧 
随 其 后 的 and )。 换 句 话 说 ， 如 果 不 指定 关键 字 ， 则 关键 字 就 是 al11。” 


因此 ， 除 非 你 真 的 想 针 对 特定 的 媒体 类 型 应 用 样式 ， 否 则 就 不 要 写 screen and 了 。 后 面 的 
例子 都 会 这 么 做 。 








um 







































































2.8.8 ”媒体 查询 可 以 测试 哪些 特性 


在 响应 式 设计 中 ， 媒体 查 询 中 用 得 最 多 的 特性 是 视 口 宽度 (wiath )。 就 我 个 人 的 经 验 来 看 ， 
很 少 需要 用 到 其 他 设备 特性 ( 偶尔 会 用 到 分 辨 率 和 视 口 高 度 )。 不过， 为 以 防 万 一 ， 这 里 还 是 给 
出 了 媒体 查询 3 级 规定 的 所 有 可 用 特性 。 但 愿 其 中 有 些 特 性 能 引起 你 的 兴趣 。 
O width: 视 口 宽度 。 
D height: 视 口 高 度 。 
O device-width: 演 染 表面 的 宽度 (可 以 认为 是 设备 屏幕 的 宽度 )。 
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O device-height: 演 染 表面 的 高 度 (可 以 认为 是 设备 屏幕 的 高 度 )。 

口 orientation: 设备 方向 是 水 平 还 是 垂直 。 

O aspect-ratio: 视 口 的 宽 高 比 。16 : 9 的 宽屏 显示 器 可 以 写成 aspect-ratio:16/9。 

O color: 颜色 组 分 的 位 深 。 比 如 min-color:16 表 示 设 备至 少 支持 16 位 深 。 

O color-index: 设备 颜色 查找 表 中 的 条 目 数 ， 值 必须 是 数值 ， 且 不 能 为 负 。 

O monochrome: 单 色 帧 缓冲 中 表示 每 个 像素 的 位 数 ， 值 必须 是 数值 (整数 )， 比 如 

monochrome: 2， 且 不 能 为 负 。 

D resolution: 屏幕 或 打印 分 辨 率 ， 比 如 min-resolution: 300dpi。 也 可 以 接受 每 厘 

米 多 少 点 ， 比 如 min-resolution: 118dpcmo 

O scan: 针对 电视 的 逐 行 扫 描 ( progressive ) 和 隔行 扫描 (interlace )。 例 如 720p HD TV ( 720p 
中 的 p 表 示 progressive， 即 逐 行 ) 可 以 使 用 scan: progtressive 来 判断 ; 而 1080i HD TV 
( 1080i 中 的 表示 interlace， 即 隔行 ) 可 以 使 用 scan: interlace 来 判断 。 

ü grid: 设备 基于 栅 格 还 是 位 图 。 


上 面 列表 中 的 特性 , 除 scan 和 grigd 外 ， 都 可 以 加 上 min 或 max 前 级 以 指定 范围 。 看 看 下 面 的 
代码 : 


Qimport url("tiny.css") screen and (min-width:200px) and (maxwidth: 
360px); 


这 里 使 用 最 大 宽度 (max-width ) 和 最 小 宽度 (min-width ) 设 定 了 范围 。 因 此 ，tiny.css 
只 在 设备 视 口 介 于 200 像 素 和 360 像 素 之 间 时 才 会 被 应 用 。 

























































































CSS 媒 体 查 询 4 级 草案 中 废弃 了 一 些 特 性 ， 特 别 是 device-height、 
device-widthfedevice-aspect-ratio( AJ: https://drafts.csswg.org/media- 
queries-4/£mf-deprecated )。 虽然 已 经 支持 它们 的 浏览 器 还 会 继续 支持 , 但 不 建议 


CSS 媒 体 查询 4 级 中 废弃 的 特性 
在 新 写 的 样式 表 中 再 使 用 它们 。 
2. 


4 ”通过 媒体 查询 修改 设计 


从 原理 上 讲 ， 位 于 下 方 的 CSS 样 式 会 覆盖 位 于 上 方 的 目标 相同 的 CSS 样 式 ， 除 非 上 方 的 选择 
符 优先 级 更 高 或 者 更 具体 。 因 此 ,可 以 在 一 开始 设置 一 套 基准 样式 , 将 其 应 用 给 不 同 版 本 的 设计 
方案 。 这 套 样式 表 确 保 用 户 的 基准 体验 。 然 后 再 通过 媒体 查询 覆盖 样式 表 中 相关 的 部 分 。 比 如 ， 
如 果 是 在 一 个 很 小 的 视 口 中 ， 可 以 只 显示 文本 导航 ( 或 者 用 较 小 的 字号 )， 然 后 对 于 拥有 较 大 空 
间 的 较 大 视 口 ， 则 通过 媒体 查询 为 文本 导航 加 上 图 标 。 


现在 我 们 就 看 一 个 实际 的 例子 ( example_02-02 )。 首 先是 标记 : 
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«a href="#" class-"CardLink CardLink Hearts"»Hearts«/a» 

«a href="#" class-"CardLink CardLink Clubs"»Clubs«/a» 

«a href="#" class-"CardLink CardLink Spades"»Spades«/a» 

«a href="#" class-"CardLink CardLink Diamonds"»Diamonds«c/a» 


接 下 来 是 CSS: 


.CardLink ( 
display: block; 
color: $666; 


text-shadow: 0 2px 0 #efefef; 
text-decoration: none; 

height: 2.75rem; 

line-height: 2.75rem; 
border-bottom: 1px solid #bbb; 
position: relative; 


Gmedia (min-width: 300px) ( 
.CardLink { 
padding-left: 1.8rem; 
font-size: 1.6rem; 


.CardLink:before ( 
display: none; 
position: absolute; 
top: 50$; 
transform: translateY(-502); 
left: 0; 


.CardLink Hearts:before ( 
content: "9"; 


.CardLink Clubs:before ( 
content: "4"; 


.CardLink Spades:before ( 
content: "4"; 


.CardLink Diamonds:before ( 
content: "$"; 


Gmedia (min-width: 300px) ( 
.CardLink:before ( 
display: block; 
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下 载 示例 代码 
M 
Q 如 果 你 在 Packt 出 版 社 购买 了 本 书 ， 可 以 登录 你 的 账号 下 载 本 书 示例 代码 : 
http:/www.packtpub.com。 如 果 你 是 在 别处 买 的 ， 请 访问 : http://www.packtpub. 


com/support， 然 后 注册 并 通过 电子 邮箱 接收 示例 代码 。 





小 视 口 下 的 效果 如 下 图 所 示 : 





Hearts 


Clubs 


Spades 


Diamonds 














以 下 则 是 大 视 口 中 的 效果 : 





® Hearts 
e» Clubs 
^ Spades 


¢ Diamonds 











2.4.4 任何 CSS 都 可 以 放 在 媒体 查询 里 

要 知道 ， 正 常情 况 下 我 们 编写 的 任何 CSS 样 式 ， 都 可 以 放 在 媒体 查询 里 。 因 此 ， 使 用 媒体 查 
询 可 以 从 整体 上 修改 一 个 网 站 的 布局 和 外 观 (通常 针对 不 同 的 视 口 大 小 )。 
2.4. ”针对 高 分 辨 率 设备 的 媒体 查询 

媒体 查询 的 一 个 常见 的 使 用 场景 ， 就 是 针对 高 分 辨 率 设备 编写 特殊 样式 。 比 如 : 


@media (min-resolution: 2dppx) { 


/* 样式 */ 



































} 
这 里 的 媒体 查询 只 针对 每 像素 单位 为 2 点 ( 2dppx ) 的 屏幕 。 类 似 的 设备 有 iPhone 4 的 视网膜 








第 
及 其 他 很 多 高 清 屏 的 安 卓 机 。 减 小 dppx 值 ， 可 以 扩大 这 个 媒体 查询 的 适用 范围 。 
为 支持 更 广泛 的 设备 ， 在 使 用 min-resolution 属 性 时 ， 需 要 加 上 适当 的 
浏览 器 前 级 ， 可 以 使 用 工具 自动 完成 。 不 知道 什么 是 浏览 器 前 级 ?下 一 章 我 们 
会 详细 介绍 。 
2.5 组 织 和 编写 媒体 查询 的 注意 事项 


在 这 里 ,我们 持 一 部 分 , 谈 谈 在 编写 和 组 织 媒 体 查 询 的 时 候 都 有 哪些 方式 方法 。 这 些 方式 方 
法 各 有 利 上 次 ,但 至 少 我 们 应 该 知道 它们 ， 至 于 是 否 采 用 ， 那 就 是 为 一 回 事 了 。 




















2.5.1 使 用 媒体 查询 链接 不 同 的 CSS 文件 


从 浏览 器 的 角度 看 ，CSS 属 于 “阻塞 演 染 ” 的 资源 。 换 句 话 说 ,浏览 器 需要 下 载 并 解析 链接 
的 CSS 文 件 ， 然 后 再 泻 染 页 面 。 


， 现 代 浏 览 器 都 很 聪明 ,知道 哪些 样式 表 (在 头 部 通过 媒体 查询 链接 的 样式 表 ) 必须 立 
E "iu aU ERA 后 再 处 理 。 


在 这 些 浏览 器 看 来 ， 不 符合 媒体 查询 指定 条 件 〈 比如 屏幕 比 媒体 查询 指定 的 小 ) 的 CSS 文 件 
可 以 延缓 执行 ( deferred )， 到 页 面 初始 加 载 后 再 处 理 ， 以 便 让 用 户 感觉 页 面 加 载 速度 更 快 。 


关于 这 方面 内 容 ， 可 以 参考 谷歌 开发 者 网 站 的 文章 “阻塞 泻 染 的 CSS”"”: https://developers. 
google.com/web/fundamentals/performance/critical-rendering-path/render-blocking- d 短 链接 : http://t.cn/ 
RqnOXBt )。 


我 想 重点 向 大 家 介绍 这 一 段 


“请 注意 , | URZ | 仅 是 指 该 资 PEREA EAE ETTA 页 面 泻 染 。 无 论 CSS 
是 否 阻塞 泻 染 ，CSS 资 源 都 会 被 下 载 ， 只 是 说 非 阻 塞 性 资源 的 优先 级 比较 低 而 已 。 


FREE GM, 所 有 链接 的 文件 都 会 被 下 载 下 来 ,只 是 如 有 果 有 的 文件 不 必 立 即 应 用 ， 那 浏览 
就 不 会 让 它 影响 页 面 的 泻 染 


因此 ， 如 果 浏 览 咒 要 加 载 的 响应 式 页 面 ( 参 见 example_02-03 ) mc t ou 
个 不 同 的 样式 表 ( 分 别 为 不 同 视 口 的 设备 应 用 样式 )， 那 它 就 会 下 载 4 个 CSS 文 件 ， 但 在 泻 染 
之 前 ， 它 只 会 解析 那个 针对 当前 视 口 大 小 的 样式 表 。 








































































































(D Sam Chen ( http://www.zfanw.com/blog/ ) 中 文 翻译 版 ， 这 里 引用 的 文字 直接 采用 了 他 的 译文 。 一 一 译 者 注 
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2.5.2 “分隔 媒体 查询 的 利 浆 


编写 多 个 媒体 查询 分 别 对 应 不 同 的 样式 表 虽 然 有 好 处, 但 有 时 候 也 不 一 定 ( 不 算 个 人 喜好 或 
代码 分 工 的 需要 )。 


多 一 个 文件 就 要 多 一 次 HTTP 请 求 , 在 某 些 条 件 下 , HTTP 请 求 多 了 会 明显 影响 页 面 加 载 速度 。 
Web 开 发 可 不 是 件 容易 的 事 儿 ! 此 时 应 该 关注 的 是 网 站 的 整体 性 能 ， 最 好 在 不 同 设备 上 对 不 同 的 
情形 都 做 相应 测试 ， 比 较 之 后 再 决定 。 


我 对 这 件 事 的 看 法 是 , 除非 有 充裕 的 时 间 让 你 去 做 性 能 优化 ,否则 我 一 般 都 不 会 指望 在 这 方 
面 获 取 性 能 提升 。 我 会 首先 确认 : 


口 所 有 图 片 都 压缩 过 了 ; 

口 所 有 脚本 都 拼接 和 缩短 了 ; 

口 所 有 资源 都 采用 了 gzip 压 缩 ; 

口 所 有 静态 内 容 都 缓存 到 了 CDN; 
a 所 有 和 多余 的 CSS 规 则 都 被 清除 了 。 


之 后 ,我 才 可 能 会 考虑 ， 为 了 再 提升 一 些 性 能 ， 是 否 需 要 把 媒体 查询 分 隔 开 ， 让 它们 分 别 引 
用 不 同 的 CSS 文 件 。 



















































































gzip 是 一 种 压缩 和 解压 缩 的 文件 格式 。 主 流 一 点 的 服务 器 都 支持 gzip 压 缩 

> CSS， 从 而 让 服务 器 发 送 给 设备 的 文件 明显 “瘦身 ”( 到 了 设备 之 后 ， 再 解压 缩 

成 原来 的 格式 )。 关 于 gzip 的 更 多 信息 ， 请 参考 维基 百科 : https;//en.wikipedia. 
org/wiki/Gzipo 


2.5.3 ”把 媒体 查询 写 在 常规 样式 表 中 
除非 在 极端 情况 下 ， 否 则 我 都 建议 在 既 有 的 样式 表 中 写 媒体 查询 ， 跟 常规 的 规则 写 在 一 起 。 


如 果 你 也 是 这 样 想 的 , 那么 还 有 一 个 问题 需要 考虑 : 是 该 把 媒体 查询 声明 在 相关 的 选择 符 下 
面 ， 还 是 该 把 相同 的 媒体 查询 并 列 起 来 ， 每 个 媒体 查询 单独 一 块 ? 这 个 问题 问 得 好 啊 。 























2.6 ”组 合 媒体 查询 还 是 把 它们 写 在 需要 的 地 方 
我 个 人 喜欢 把 媒体 查询 写 在 需要 它 的 地 方 。 比 如 ,我 想 根据 视 口 大 小 在 样式 表 中 的 几 个 地 方 
改变 几 个 元 素 的 宽度 ， 我 会 这 样 做 : 


.thing ( 
width: 50$; 








Gmedia screen and (min-width: 30rem) ( 
.thing ( 
width: 75$; 
j 
j 


/* 这 里 是 另外 一 些 样式 规则 */ 


.thing2 ( 
width: 65$; 
j 


@media screen and (min-width: 30rem) ( 
.thing2 ( 
width: 75$; 
j 
} 








这 样 写 看 起 来 有 点 春 ， 两 个 媒体 查询 的 条 件 相 同 ， 都 针对 屏幕 最 小 宽度 为 30rem 的 情况 。 像 
这 样 重复 写 两 遍 emedia 真 的 是 宛 余 和 浪费 吗 ? 难道 不 该 把 针对 相同 条 件 的 CSS 规 则 都 组 织 到 一 





























个 媒体 查询 块 里 吗 ? 像 这 样 : 


.thing ( 
width: 50$; 





} 


.thing2 ( 
width: 65$; 
} 


@media screen and (min-width: 30rem) { 
.thing ( 
width: 75$; 
} 
.thing2 ( 
width: 75$; 
j 
} 





当然 这 也 是 一 种 方式 。 不过， 从 维护 代码 的 角度 看 ,这 种 写法 不 利于 维护 。 当 然 两 种 写法 都 
对 ， 只 是 我 比较 倾向 于 针对 某 个 选择 符 写 一 些 规则 , 然后 如 果 该 规则 需要 视 条 件 而 变 , 那 我 就 把 








相应 的 媒体 查询 紧 接 着 写 在 它 的 下 面 。 这 样 在 需要 查找 与 某 个 选择 符 相关 的 规则 时 ,就 不 月 
一 个 一 个 的 代码 块 里 找 了 。 











日 再 从 


有 了 CSS 预 处 理 器 和 后 处 理 器 ,这 个 做 法 还 可 以 更 简便 ， 因 为 可 以 将 某 个 规 
AA 则 的 媒体 查询 “ 变 体 ”直接 吝 到 规则 当中 。 我 的 另 一 本 书 《Sass 和 Compass 设 


计 师 指南 》 中 专门 有 一 节 是 写 这 方面 的 ， 大 家 可 以 参考 。 
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对 于 这 种 写 媒体 查询 的 方式 , 你 说 它 会 造成 元 余 是 绝对 没 错 的 。 单 从 控制 文件 大 小 的 角度 说 ， 
难道 这 样 写 媒体 查询 的 做 法 真 的 不 可 取 吗 ? 没 错 ， 谁 也 不 希望 CSS 文 件 过 度 膨 胀 。 但 事实 上 gzip 
压缩 (应 该 用 它 来 压缩 服务 器 上 的 所 有 可 以 压缩 的 资源 ) 完全 可 以 把 差别 降 到 可 以 忽略 不 计 的 程 
度 。 我 之 前 做 过 很 多 这 方面 的 测试 ， 要 是 你 有 兴趣 ， 可 以 看 看 : http://benfrain.com/inline-or- 
combined-media-queries-in-sass-fight/。 总 之 ， 在 标准 样式 之 后 紧 接着 写 媒 体 查询 ， 根 本 用 不 着 担 
心 文件 大 小 。 





















































E 如 果 你 想 在 原始 的 规则 后 面 直 接 写 媒体 查询 ， 但 希望 把 所 有 条 件 相 同 的 媒 
Q 体 查 询 合并 成 一 个 ， 其 实 可 以 使 用 构建 工具 ， 比 如 在 写作 本 书 时 Grunt 和 Gulp 就 
有 相关 插件 可 以 帮 你 做 到 这 一 点 。 


2.7 关于 视 口 的 meta 标签 

为 了 利用 媒体 查询 ， 应 该 让 小 屏幕 以 其 原生 大 小 来 显示 网 页 ， 而 不 是 先 在 980 像 素 宽 的 窗口 
中 泻 染 好 ， 让 用 户 去 放大 或 缩小 。 

2007 年 ,苹果 在 发 布 iPhone 的 时 候 ， 就 引入 了 一 个 针对 视 口 的 meta 标 签 。 目 前 安 上 唱机 和 其 他 
手机 基本 都 支持 这 个 标签 了 。 这 个 用 于 视 口 的 meta 标 签 ， 是 网 页 与 移动 浏览 器 的 接口 。 网 页 通 
过 这 个 标签 告诉 移动 浏览 句 ， 它 希望 浏览 圳 如何 泻 染 当前 页 面 。 

在 可 以 预见 的 未 来 ， 任 何 响应 式 的 希望 在 小 屏幕 设备 上 好 好 显示 的 网 页 ， 都 必须 添加 这 个 
meta 标 签 。 



































在 模拟 器 和 仿真 器 中 测试 响应 式 设计 


虽然 最 好 是 在 真实 的 设备 上 测试 , 但 有 时 候 使 用 安 卓 仿真 器 和 iOS 模 拟 器 更 
方便 。 
模拟 器 就 是 用 于 模拟 相关 设备 的 ， 而 仿真 器 则 会 尝试 实际 地 解释 原始 的 设 


M 备 代码 。 
安 草 面向 Windows、Linux 和 Mac 提 供 了 仿真 器 ， 都 在 可 以 免费 下 载 安 装 的 
A XESDKE: https://developer.android.com/sdk. 
iOS 模 拟 器 只 能 为 Mac OS X 用 户 提供 便利 ,包含 在 Xcode 中 ( 可 以 在 Mac App 
Store 中 免费 下 载 )。 
浏览 器 通常 也 有 不 错 的 模拟 移动 设备 的 工具 ， 一 般 在 开发 者 工具 里 面 。 比 
如 ，Firefox 和 Chrome 都 支持 模拟 很 多 移动 设备 / 视 口 。 





这 个 视 口 <meta> 标 签 应 该 放 在 HTML 的 <neagd> 标 签 中 。 可 以 在 其 中 设置 具体 的 宽度 ( 比如 
使 用 像素 单位 )， 或 者 设置 一 个 比例 ( 比如 2.0， 即 实际 大 小 的 两 倍 )。 下 面 这 行 代 码 设 置 以 内 容 
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实际 大 小 的 两 倍 ( 百 分 之 二 百 ) 显示 : 


<meta name="viewport" content="initial-scale=2.0,width=device-width" 
{> 


好 ， 现 在 我 们 分 析 一 下 前 面 的 <meta> 标 签 。 首 先 ，name="viewport" 表 示 针 对 视 口 ， 这 不 
用 说 了 。 接着 content="initial-scale=2.0" 的 意思 是 “把 内 容 放 大 为 实际 大 小 的 两 倍 ”( 0.5 
就 是 一 半 ,，3.0 就 是 三 倍 ),。 最 后 ,width=device-wigth 告 诉 浏览 器 页 面 的 宽度 等 于 设备 的 宽度 
(width=device-width )。 


通过 这 个 <meta> 标 签 还 可 以 控制 用 户 可 以 缩放 页 面 的 程度 。 下 面 的 例子 允许 用 户 最 大 将 页 
面 放 大 到 设备 宽度 的 三 倍 ， 最 小 可 以 将 页 面 缩小 至 设备 宽度 的 一 半 。 


«meta name-"viewport" content-"width-device-width, maximum-scale-3, 
minimum-scale-0.5" /> 


甚至 可 以 完全 禁止 用 户 缩放 。 虽然 允许 缩放 是 一 个 重要 的 无 障碍 特性 , 但 现实 当中 很 少 有 必 
要 这 么 做 : 


«meta name-"viewport" content-"initial-scale-1.0, user-scalable-no" /> 


其 中 ，user-scalable=no 是 禁止 用 户 缩放 的 。 


错 ， 我 们 把 initial-scale 又 改 回 了 1.0， 意 思 是 让 移动 浏览 器 在 其 视 口 的 宽度 中 泻 染 网 
页 。 将 wiath 设 置 为 device-width 就 是 要 在 所 有 支持 的 移动 浏览 器 中 ， 以 百分之百 的 视 口 宽度 
来 演 染 页 面 。 大 多 数 情况 下 ， 都 可 以 使 用 这 个 meta 标 签 : 


«meta name="viewport" content-"width-device-width,initial-scale-1.0" 
/» 













































































在 看 到 视 口 meta 标 签 被 越 来 越 多 地 使 用 之 后 ，W3C 党 试 在 CSS 中 引入 能 达 
到 相同 目的 的 特性 ， 参 考 链 接 dev.w3.org/csswg/css-device-adapt/ 中 关于 新 
y eviewport 上 声明 的 内 容 。 意 思 就 是 以 后 可 以 不 用 在 <head> 里 写 <meta> 标 签 了 ， 
而 是 可 以 代 之 以 在 CSS 中 写 eviewport { width:320px; }。 这 同样 可 以 将 浏 
览 器 宽度 设置 为 320 像 素 。 不 过 ， 目 前 还 没有 多 少 浏览 器 支持 这 个 CSS 特 性 。 考 
虑 到 面向 未 来 ， 可 以 同时 使 用 meta 标 签 和 eviewport 上 声明 。 








现在 , 读 考 对 什么 是 媒体 查询 以 及 如 何 使 用 媒体 查询 已 经 有 了 足够 的 了 解 了 。 在 讨论 为 一 个 
话题 之 前 ， 我 想 让 大 家 知道 媒体 查询 的 下 一 个 版 本 会 是 什么 样 的 。 


2.8 媒体 查询 4 级 


在 本 书写 作 时 ，CSS 媒 体 查 询 4 级 (CSS Media Queries Level 4 ) 还 是 草案 ( http://dev.w3.org/ 
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csswg/mediaqueries-4/ )， 其 中 的 新 特性 还 没有 多 少 浏览 器 支持 。 换 句 话 说， 虽然 我 们 会 在 这 里 介 
绍 它 们 , 但 将 来 它们 很 可 能 还 会 改变 。 请 大 家 在 真正 使 用 这 些 新 特性 时 , 仔细 研究 一 下 浏览 器 支 
持 情况 以 及 语法 是 否 正确 。 


























目前 来 说 , 我 们 只 想 在 这 里 介绍 4 级 中 的 可 编程 (scripting )、 指 针 与 悬 停 、 亮 度 (luminosity )。 














2.8.1 可 编程 的 媒体 特性 


通常 ， 如 果 浏 览 器 里 没有 JavaScript， 我 们 会 给 某 个 HTML 标 签 添 加 一 个 类 ， 而 在 JavaScript 
出 现时 再 替换 该 类 。 这 样 就 可 以 根据 这 个 HTML 类 来 决定 要 加 载 什么 代码 ( 及 CSS )。 最 常见 的 场 
景 是 通过 这 种 方式 为 启用 JavaScript 的 用 户 编写 特有 的 CSS 规 则 。 


















































这 个 做 法 有 时 候 会 误导 人 。 比 如 ， 默 认 情 况 下 的 HTML 标 签 是 这 样 的 : 





«html class-"no-js"» 

















如 果 JavaScript 在 这 个 页 面 中 运行 了 ， 则 它 要 做 的 第 一 件 事 就 是 替换 这 个 类 : 











«html class="js"> 


然后 ,我们 就 可 以 只 针对 支持 JavaScript 的 浏览 器 编写 相应 的 样式 了 。 比 如 : .js .header 
( display: block; je 

















CSS 媒 体 查 询 4 级 致力 于 为 这 个 做 法 在 CSS 中 提供 更 标准 的 实现 方式 : 


@media (scripting: none) ( 
/* 没有 JavaScript 时 的 样式 */ 
} 


可 以 使 用 JavaScript 时 : 


@media (scripting: enabled) ( 
/* 有 JavaScript 时 的 样式 */ 
} 





最 后 , 这 个 新 规范 还 为 仅 开 始 时 可 以 使 用 JavaScript 提 供 了 一 个 值 。 规范 中 针对 这 个 值 给 出 的 
例子 ， 就 是 打印 页 面 时 ， 一 开始 可 以 使 用 JavaScript 来 排版 ， 然 后 就 没有 JavaScript 可 用 了 。 此 时 ， 
可 以 这 样 写 CSS : 





@media (scripting: initial-only) ( 
/* JavaScript 只 在 一 开始 有 效 的 样式 */ 
} 
可 以 通过 以 下 链接 看 到 这 个 特性 的 官方 解释 : https://dev.w3.org/csswg/mediaqueries-4/#mf- 
Scripting。 
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2.82 ”交互 媒体 特性 
以 下 是 W3C 对 指针 媒体 特性 的 描述 : 


“指针 媒体 特性 用 于 查询 鼠标 之 类 的 指针 设备 是 否 存在 , 以 及 存在 时 其 精确 的 位 置 。 
如 果 设 备 有 多 种 输入 机 制 ， 指 针 媒 体 特性 必须 反映 由 用 户 代理 决定 的 “ 主 : 输入 机 制 的 
特征 。” 


指针 特性 有 三 个 值 : none、coarse 和 fine。 


coarse 指 针 设备 代表 触摸 屏 设备 中 的 手指 。 不 过 ， 这 个 值 也 可 以 是 游戏 机 中 的 指针 等 不 像 
鼠标 那样 能 够 提供 精确 控制 的 机 制 。 


Gmedia (pointer: coarse) ( 
/* 针对 coarse 指 针 的 样式 */ 

















) 
fine 指 针 设 备 可 能 是 鼠标 ， 也 可 能 是 手写 笔 或 其 他 未 来 可 能 出 现 的 精确 指针 设备 : 


Gmedia (pointer: fine) ( 


/* 针对 精确 指针 的 样式 */ 











) 
个 人 觉得 , 浏览 器 应 该 尽快 实现 这 几 个 特性 。 这 是 因为 目前 还 很 难 确切 地 知道 用 户 是 在 使 用 
鼠标 ， 还 是 触摸 ， 抑 或 两 者 都 有 ， 以 及 某 一 时 刻 他 们 在 使 用 哪 一 种 。 


























最 保险 的 做 法 是 假设 用 户 在 使 用 触摸 屏 设 备 ， 并 相应 地 把 界面 元 素 调 大 。 
这 样 ， 即 使 用 户 使 用 的 是 和 鼠标， 也 不 会 影响 体验 。 相 反 ， 如 果 你 假设 用 户 使 用 
Xy 鼠标 ， 又 没有 可 靠 的 方式 检测 用 户 是 否 在 触摸 界面 ， 则 很 可 能 把 界面 元 素 设计 
得 偏 小 ， 从 而 影响 用 户 体 验 。 
关于 面向 触摸 和 指针 开发 的 挑战 ,推荐 大 家 看 一 看 Patrick H. Laukefig 27 4 
"Getting touchy” : https:/patrickhlauke.github.io/getting-touchy-presentation/。 


可 以 通过 以 下 链接 看 到 这 个 特性 的 官方 解释 : https://dev.w3.org/csswg/mediaqueries-4/#mf- 


interaction; 








2.8.8 ” 悬 停 媒体 特性 


顾名思义 ， 悬 停 媒 体 特性 就 是 用 来 测试 用 户 是 否 可 以 通过 某 种 机 制 实现 在 屏幕 元 素 上 巧 停 
的 。 如 果 用 户 有 多 种 输入 机 制 〈 触摸 或 鼠标 )， 则 检测 主 输入 机 制 。 以 下 是 这 个 特性 的 可 能 值 和 
代码 示例 。 

对 于 没有 基 停 能 力 的 情况 ， 可 以 通过 none 值 检测 : 


@media (hover: none) { 
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/* ESUERSUEAEIRPMNRA */ 
) 


对 于 可 以 悬 停 但 必须 经 过 一 定 启动 步 又 的 用 户 ， aj EH on-demand: 
@media (hover: on-demand) { 
/* 针对 可 通过 局 用 程序 实现 悬 停 用 户 的 样式 */ 
} 
对 于 可 以 悬 停 的 用 户 ， 可 以 使 用 hover: 


@media (hover) ( 


/* APT EA P MEA */ 





} 


另外 ， 还 有 any-pointer 和 any-hovetr 媒 体 特性 。 这 两 个 特性 与 前 面 的 pointer 和 hover 
类 似 ， 只 不 过 测试 的 不 光 是 主 输入 机 制 ， 而 是 任意 可 能 的 输入 设备 。 























2.8.4 环境 媒体 特性 


要 是 能 根据 用 户 的 环境 来 改变 设计 多 好 啊 ! 比如 ,根据 环境 光线 的 亮度 。 这 样 ， 如 果 用 户 身 
处 光线 很 暗 的 房间 , 我 们 可 以 相应 减 小 所 用 颜色 的 亮度 值 。 或 者 相反 ,在 光线 充足 的 环境 里 ， 提 
高 亮度 。 环 境 媒 体 属性 就 是 为 解决 这 个 问题 而 生 的 。 看 下 面 的 例子 : 


@media (light-level: normal) ( 


/* 针对 标准 亮度 的 样式 */ 





} 

@media (light-level: dim) { 
/* 针对 瞳 光 线条 件 的 样式 */ 

} 

@media (light-level: washed) { 
/* 针对 强 光线 条 件 的 样式 */ 





} 
4 级 媒体 查询 尚未 得 到 广泛 支持 ， 而 有 旦 规范 本 身 还 有 可 能 变动 。 不 过 ， 了 解 未 来 几 年 可 能 
什么 新 特性 可 以 使 用 还 是 有 必要 的 。 
可 以 通过 以 下 链接 看 到 这 个 特性 的 官方 解释 : https://dev.w3.org/csswg/mediaqueries-4/#mf- 
environment。 

















2.9 小 结 

本 章 学 习 了 CSS3 媒 体 查 询 , 以 及 如 何在 CSS 文 件 中 包含 媒体 查询 和 通过 它 实 现 响 应 式 的 Web 
设计 。 另 外 ， 我 们 还 学 习 了 如 何 使 用 neta 标 签 限制 浏览 器 如 何 泻 染 页 面 。 

通过 学 习 ， 我 们 知道 仅 有 媒体 查询 只 能 实现 可 适 配 的 Web 设 计 ， 即 从 一 种 布局 到 另 一 种 布局 


的 切换 。 为 了 实现 最 终 的 目标 ,还 必须 利用 流 式 布 局 ， 以 便 设 计 可 以 在 不 同 断 点 之 间或 媒体 查询 
处 理 范 围 外 弹性 适应 。 创 建 弹性 布局 让 媒体 查询 断 点 间 的 过 渡 更 平滑 ， 这 正 是 下 一 章 的 主题 。 
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很 久 以 前 , 混沌 初 开 之 际 ( 大约 公元 20 世 纪 90 年 代 未 )， 网 站 的 宽度 大 都 以 百分比 形式 定义 。 
百分比 布局 使 得 网 页 宽度 能 够 随 着 查看 它们 的 屏幕 窗口 大 小 变化 ， 因 而 得 名 弹性 布局 。 


几 年 后 ,在 大 约 2005 年 到 2010 年 ， 出 现 了 一 股 固定 宽度 设计 的 风潮 (我 非常 讨厌 那些 有 “ 像 
素 级 精度 设计 ”强迫 症 的 平面 设计 师 )。 如 今 ， 我们 要 做 响应 式 设计 了 ， 又 得 回头 捡 起 弹性 布局 
设计 ， 想 想 它们 的 好 处 。 


上 一 章 最 后 , 我 们 达成 一 个 共识 , 即 媒体 查询 虽然 可 以 让 我 们 根据 视 口 大 小 分 别 切换 不 同 的 
样式 , 但 我 们 的 设计 在 这 些 “ 断 点 ”之 间 必 须要 平滑 过 渡 才 行 。 而 使 用 弹性 布局 就 可 以 轻松 解决 
这 个 问题 ， 实 现 设计 在 媒体 查询 断 点 间 的 平滑 过 渡 。 


2015 年 , 我 们 有 了 写 响 应 式 网 站 的 更 好 的 手段 。CSS 推 出 了 一 个 新 的 布局 模块 叫 "弹性 盒子 ” 
( Flexbox )， 已 经 有 很 多 浏览 器 都 支持 ， 可 以 在 日 常 开发 中 使 用 了 。 


除了 用 于 实现 弹性 布局 ，Flexbox 还 可 以 用 来 居中 内 容 ， 改 变 标 记 中 的 源码 顺序 ， 创 建 令 人 
惊艳 的 页 面 布局 。 本 章 主 要 篇 幅 用 于 讨论 Flexbox， 以 及 它 提 供 的 强大 功能 。 


响应 式 设计 还 有 一 个 重要 组 成 部 分 : 响应 式 图 片 , 今天 同样 可 以 更 好 地 实现 了 。 现在 , 已 经 
有 了 专门 的 方法 为 特定 设备 视 口 发 送 特定 的 图 片 。 本 章 将 在 3.4 节 介绍 响应 式 图 片 的 原理 ， 以 及 
如 何 让 它们 为 我 所 用 。 

本 章 内 容 : 
口 将 固定 像素 大 小 转换 为 比例 大 小 
口 已 有 CSS 布 局 机 制 及 其 不 足 之 处 


口 理解 Flexible Box Layout Module 及 其 优点 
口 实现 分 辩 率 切换 以 及 响应 式 图 片 的 正确 方法 
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3.1 将 固定 像素 大 小 转换 为 弹性 比例 大 小 


Photoshop, Illustrator, ( 令 人 怀念 的 ) Fireworks 以 及 Sketch 等 图 形 图 像 软 件 做 出 来 的 图 都 是 
以 固定 像素 来 衡量 大 小 的 。 开 发 者 如 果 要 在 弹性 布局 中 使 用 这 些 图 , 有 时 候 需要 将 固定 像素 大 小 
转换 为 比例 大 小 。 


这 个 转换 有 一 个 简单 的 公式 ， 由 响应 式 设计 之 父 Ethan Marcotte 在 他 2009 年 的 文章 “Fluid 
Grids”( http://alistapart.com/article/FLUIDGRIDS ) 中 给 出 : 





结果 = 目标 /上 下 文 


如 果 看 到 数学 公式 你 就 头疼 ,可 以 这 么 想 : 用 元 素 所 在 容器 的 大 小 除 元 素 的 大 小 。 下 面 再 结 
合 实践 来 加 深 一 下 理解 。 理 解 了 这 个 转换 , 就 可 以 将 任何 固定 大 小 布局 转换 成 响应 式 或 弹性 布局 。 


我 们 以 一 个 为 桌面 浏览 器 设计 的 简单 页 面 为 例 。 理 想 情 况 下 , 应 该 从 小 屏幕 设计 向 桌面 设计 
转换 。 但 为 了 演示 比例 ， 这 里 反 流 程 来 做 。 


下 面 是 一 张 布局 图 : 








这 个 布局 宽度 为 960 像 素 , 但 页 头 和 页 脚 都 是 与 屏幕 一 样 宽 的 。 左 侧 边栏 宽度 是 200 像 素 , 右 
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侧 边 栏 宽度 是 100 像 素 。 我 这 个 一 提 数 学 就 蒙 的 脑袋 , 都 可 以 算出 中 间 区 块 的 宽度 是 660 像 素 。 我 
们 的 目标 是 把 左 中 右 区 块 由 固定 像素 大 小 转换 为 比例 大 小 。 


先 转换 左边 栏 。 左 边栏 宽度 为 200 单 位 ( 目标 ), 用 960 单 位 (上下文 ) 来 除 ,结果 是 0.208333333。 
ET, 在 使 用 前 面 的 公式 得 到 目标 与 上 下 文 相 除 的 结果 后 ， 都 需要 把 小 数 点 向 右 移 两 位 。 于 是 我 
们 得 到 了 20.8333333%。 这 个 比例 就 是 200 像 素 占 960 像 素 的 比例 。 


好 ， 那 中 间 区 域 呢 ? 660 ( 目标 ) 除 以 960 (上下文 )， 得 到 0.6875。 小 数 点 向 右 移 两 位 青 加 
上 百 分 号 就 是 68.75%。 最 后 是 右边 栏 。100 C 目标) 除 以 960 ( 上下文 ) 得 到 0.104166667。 小 数 
点 右 移 两 位 加 百 分 号 得 到 10.4166667%。 超 简单 吧 ? RRE: 目标 除 以 上 下 文 等 于 结 


为 了 证 明 以 上 计算 结果 ,下 面 我 们 就 简单 写 一 个 布局 ,大 家 可 以 参考 example_03-01。HTML 
代码 如 下 : 


















































<div class="Wrap"> 
<div class="Header"></div> 
«div class="WrapMiddle"> 
<div class="Left"></div> 
<div class="Middle"></div> 
<div class="Right"></div> 
</div> 
<div class="Footer"></div> 
</div> 


CSS 如 下 : 


html, 
body ( 
margin: 0; 
padding: 0; 
} 


.Wrap { 
max-width: 1400px; 
margin: 0 auto; 


} 


.Header { 
width: 100%; 
height: 130px; 
background-color: #038C5A; 
} 


.WrapMiddle { 
width: 100%; 
font-size: 0; 


} 


.Left { 
height: 625px; 
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width: 20.8333333$; 
background-color: $03A66A; 
display: inline-block; 

) 


.Middle ( 
height: 625px; 
width: 68.75$; 
background-color: t$bbbf90; 
display: inline-block; 

) 


.Right ( 
height: 625px; 
width: 10.4166667$; 
background-color: $03A66A; 
display: inline-block; 

} 


.Footer { 
height: 200px; 
width: 100$; 
background-color: 4025059; 
} 


如 果 你 在 浏览 器 中 打开 这 个 示例 页 面 , 然后 改变 窗口 大 小 , 就 会 发 现 中 间 区 块 会 一 直 与 左右 
边栏 成 比例 缩放 。 当 然 ， 也 可 以 修改 这 里 .wrap 元 素 的 max-width 值 (这 里 是 1400 像 素 )， 大 一 
点 或 小 一 点 都 试 一 下 。 




















y 有 人 可 能 会 说 , 为 什么 你 这 里 没有 使 用 header、footer 和 aside 这 些 语义 
化 标记 呢 ? 别 急 ， 第 4 章 我 们 再 详细 讨论 HTML5 为 我 们 提供 的 语义 化 标记 。 











现在 我 们 看 一 看 同样 的 内 容 在 较 小 的 屏幕 上 收缩 到 一 定 宽度 时 , 是 怎么 变 成 我 们 之 前 看 到 的 
布局 的 。 这 个 布局 的 最 终 代 码 请 参考 example_03-02。 


对 于 小 屏幕 , 核心 思想 就 是 把 内 容 显 示 在 一 根 长 条 里 。 此 时 左边 栏 会 作为 “ 画 外 元 素 ” 存 在 ， 
通常 用 于 保存 菜单 导航 之 类 的 内 容 , 只 有 当 用 户 点 击 了 某 个 菜单 图 标 时 才 会 滑 入 屏幕 。 主 内 容 区 
位 于 页 头 下 方 ， 而 右边 栏 又 在 主 内容 区 下 方 ， 最 后 是 页 脚 区 。 对 这 个 例子 而 言 , 我们 可 以 让 用 户 
点 击 屏幕 中 某 个 区 域 来 显示 左边 栏 中 的 菜单 。 在 真实 的 开发 中 , 需要 在 布局 的 某 处 放 一 个 菜单 按 
钮 或 图 标 ， 以 便 用 户 触发 边栏 菜单 显示 出 来 〈 这 个 例子 需要 点 击 页 头 区 域 )。 

































































M 为 了 切换 文档 主体 的 类 ， 我 使 用 一 些 JavaScript 代 码 。 因 为 这 里 只 是 示例 ， 
而 非 真正 的 “产品 "， 所 以 使 用 了 点 击 事件 。 如 果 是 产品 ， 那 应 该 考虑 触摸 事件 
的 一 些 问题 (比如 去 掉 iOS 设 备 存 在 的 300ms 的 延迟 )。 
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可 想 而 知 , 如 果 把 这 些 技巧 跟 我 们 刚刚 掌握 的 媒体 查询 结合 起 来 , 就 可 以 实现 设计 的 响应 式 





变化 了 。 不仅 可 以 从 一 种 布局 平滑 切换 到 为 一 种 布局 ， 而 且 可 以 实现 两 种 布局 同时 伸缩 的 效果 。 























这 里 没有 列 出 全 部 的 CSS 代 码 , 全 部 代码 可 以 参考 example 03-02。 以 下 只 是 针对 左边 栏 区 块 


的 CSS: 


.Left ( 
height: 625px; 
background-color: #03A66A; 
display: inline-block; 
position: absolute; 
left: -200px; 
width: 200px; 
font-size: .9rem; 
transition: transform .3s; 


) 


Gmedia (min-width: 40rem) ( 
.Left ( 
width: 20.8333333$; 
left: 0; 
position: relative; 


} 





首先 ,在 没有 媒体 查询 介入 的 情况 下 ， 只 是 一 个 小 屏幕 布局 。 然 后 ， 随 着 





EREK, TEREZE 


成 比例 值 ， 定 位 方式 变 成 相对 定位 ，1left 值 被 设 为 0。 不 需要 重 写 height 、display 或 








background-color 属 性 ， 因 为 不 需要 修改 它们 。 





我 们 又 前 进 了 一 步 。 这 里 综合 运用 了 两 个 响应 式 Web 设 计 的 核心 技术 : 将 固定 大 小 转换 为 比 





例 大 小 ， 以 及 使 用 媒体 查询 相对 于 视 口 大 小 应 用 CSS 规 则 。 


关于 前 面 的 例子 ， 还 有 两 点 特别 值得 注意 。 一 是 比例 值 的 小 


数 点 后 面 是 否 


真有 必要 带 那 么 多 数字 。 尽 管 宽度 本 身 最 终 会 被 浏览 器 转换 为 像素 ,但 保留 这 


la 些 位 数 有 助 于 将 来 的 计算 精确 (edet Esc god C). 
数 点 后 面 的 所 有 位 数 。 


因此 我 保留 小 


二 是 在 实际 的 项 目 中 要 考虑 JavaScript 不 可 用 的 情况 ， 此 时 也 应 该 保证 用 户 


能 看 到 菜单 内 容 。 相 应 的 细节 将 在 第 8 章 讨论 。 


3.1.1 为 什么 需要 Flexbox 


现在 ， 我 们 准备 学 习 CSS Flexible Box Layout， 也 就 是 常 说 的 Flexbox。 





不 过 在 此 之 前 ， 有 必要 先 检讨 一 由 婚 有 而 局 技 洒 基肥 娄 行 内 快 呈 浮 动 以 及 表格 的 俩 司 ， 
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3.1.2 行内 块 与 空白 


使 用 行内 块 Cinline-block ) 来 布局 的 最 大 问题 ， 就 是 它 会 在 HTML 元 素 间 演 染 空白 。 这 不 是 
bug ( 尽管 多 数 开发 者 都 希望 能 有 一 种 得 体 的 方式 去 掉 空 白 ), 但 在 多 余 时 却 需 要 人 们 想 一 些 奇 怪 
的 办 法 去 掉 它 ， 对 我 来 说 95% 的 时 间 里 它 都 是 多 余 的 。 相 应 的 对 策 也 不 少 ， 比 如 像 前 面 的 例子 中 
使 用 大 小 为 零 的 font -size, 当然 这 个 方法 也 有 它 自 己 的 问题 和 局 限 性 。 这 里 我 们 就 不 尝试 列 出 
所 有 可 能 的 解决 方案 了 ， 关 于 如 何 去 掉 使 用 行内 块 时 产生 的 空白 ,大 家 可 以 参考 “无 法 阻挡 ”的 
Chris Coyier 的 这 篇 文章 : http:;//css-tricks.com/fighting-the-space-between-inline-block-elements/ o 


另外 要 说 明 一 下 ,在 行内 块 中 垂直 居中 内 容 也 不 容易 。 而 且 ， 使 用 行内 块 ， 也 做 不 到 让 两 个 
相 邻 的 元 素 一 个 宽度 固定 ， 另 一 个 填充 剩余 空间 。 


















































3.1.3 浮动 

我 不 喜欢 浮动 , 真 的 不 喜欢 。 尽 管 浮动 布局 跨 平台 一 致 性 很 好 , 但 还 是 有 两 个 让 人 难以 释怀 
的 缺点 。 
第 一 个 ,如 果 给 浮动 元 素 的 宽度 设 定 百分比 ,那么 最 终 计 算 值 在 不 同 平台 上 的 结果 不 一 样 ( 有 
的 浏览 器 向 上 取 整 ， 有 的 浏览 器 向 下 取 整 )， 于 是 ， 有 时 候 某 些 区 块 会 跑 到 其 他 区 块 底下 ,而 有 
时 候 这 些 区 块 一 侧 又 会 莫名 出 现 一 块 明显 的 间隙 。 
第 二 个 ， 通 常 都 要 清除 浮动 ， 才 能 避免 父 盒子 /元 素 折 丢 。 虽 然 很 容易 做 ， 但 每 次 清除 都 相 
当 于 在 提醒 我 们 : 浮动 并 非 一 个 地 道 的 布局 机 制 。 


















































3.1.4 ”表格 与 表 元 
别 把 dqisplay:table 和 display :table-cell 与 对 应 的 HTML 元 素 搞 混 ! 这 两 个 CSS 属 性 
只 是 用 于 模仿 它们 的 好 兄弟 的 。 实 际 上 ， 它 们 不 会 真正 影响 HTML 的 结构 。 


我 知道 CSS 表 格 布局 的 很 多 实用 之 处 。 比 如 ， 跨 平台 绝对 一 致 ， 而 且 能 做 到 一 个 元 素 在 另 一 
个 元 素 内 垂直 居中 。 而 且 ， 设置 为 display :table-cell 的 元 素 在 设置 为 display :table 的 元 
素 中 产生 的 间距 恰到好处 。 它 们 不 像 浮 动 元 素 那样 存在 含 人 差 。 而 且 , 用 它们 可 以 向 后 兼容 IE7! 


可 是 ， 限 制 也 不 少 。 总 体 上 说 ， 需 要 在 每 个 项 目 外 面包 一 层 (要 想 完 美 地 垂直 居中 ， 表 元 必 
须 被 包 在 一 个 表格 元 素 中 )。 另 外 , 也 不 可 能 把 设置 为 aisplavy:table-cel1 的 项 目 包 到 多 行 上 。 


一 句 话 ， 现 有 的 所 有 布局 方法 都 存在 严重 缺陷 。 好 在 ,终于 有 了 一 种 CSS 布 局 方法 可 以 解决 
这 些 问 题 ， 而 且 还 能 做 得 更 好 。 来 ， 敲 起 鼓 来 打 起 锣 ， 欢 迎 Flexbox 登 场 。 
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3.2 Flexbox 概述 


Flexbox 可 以 解决 前 面 提 到 的 显示 机 制 的 问题 ， 关 于 它 的 超 能 力 ， 可 以 概括 如 下 : 


a 方便 地 垂直 居中 内 容 

O 改变 元 素 的 视觉 次 序 

口 在 盒子 里 自动 插入 空白 以 及 对 齐 元 素 ， 自 动 对 齐 元 素 间 的 空白 

O 让 你 年 轻 10 岁 (也许 没 那么 夸张 ， 但 以 我 有 限 的 经 验 来 看 ， 它 能 减少 你 不 少 压力 ) 











3.2.1 Flexbox 三 级 跳 


在 达到 今天 相对 稳定 的 版 本 之 前 ，Flexbox 经 过 了 几 次 重大 的 迭代 。 从 2009 年 版 
( https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ ) 到 2011 年 版 ( https://www.w3.org/TR/ 
2011/WD-css3-flexbox-20111129/ )， 再 到 我 们 例子 中 用 到 的 2014 年 版 ( https://www.w3.org/TR/ 


css-flexbox-1/ )。 前 后 语法 变化 之 大 非常 明显 。 




















这 几 个 不 同 版 本 的 规范 对 应 着 不 同 的 实现 。 需 要 关注 哪些 版 本 ,取决 于 你 需要 支持 的 济 


3.2.2 ”浏览 器 对 Flexbox 的 支持 
XE fé Jta PESCE Y EG TES CDU ROSAS SCSEFlexbox z^ 


对 于 其 他 浏览 器 ( 包括 所 有 移动 端 浏 览 器 )， 有 方法 可 以 享受 Flexbox 的 绝 大 多 数 特性 。 具 体 
支持 信息 ， 还 是 自己 去 查 吧 : http://caniuse.com/。 



































正式 讨论 Flexbox 前 ， 先 简单 说 点 重要 的 题 外 话 。 
LE UE 


我 希望 大 家 看 几 个 Flexbox 的 示例 ， 就 能 认同 它 的 用 途 ， 并 且 有 信心 去 用 。 可 是 ， 纯 手工 去 
写 代 码 以 支持 不 同 的 Flexbox 规 范 还 是 非常 痛苦 的 。 下 面 是 一 个 例子 , 要 设置 Flexbox 相 关 的 3 个 属 
性 和 值 : 


.flex ( 
display: flex; 
flex: 1; 
justify-content: space-between; 















































) 


这 里 使 用 了 比较 新 的 语法 。 但 是 ， 要 想 支 持 安 卓 浏 览 器 〈v4 及 以 下 版 本 操作 系统 ) 和 IE10， 
最 终 代 码 得 这 样 写 : 
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.flex { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-flex: 1; 
-webkit-flex: 1; 
-ms-flex: 1; 
Elex: 1; 
-webkit-box-pack: justify; 
-webkit-justify-content: space-between; 
-ms-flex-pack: justify; 
justify-content: space-between; 





) 

这 些 代码 一 个 都 不 能 少 , 因为 近 几 年 来 浏览 器 不 断 以 实验 性 特性 推出 新 功能 , 而 这 些 实验 性 
特性 都 要 加 “厂商 前 级 ”。 每 家 浏览 器 厂商 都 有 自己 的 前 级 。 比 如 -ms- 是 Microsoft，-webkit- 
是 WebKit，-moz- 是 Mozilla。 于 是 ,每 个 新 特性 要 在 所 有 浏览 器 中 生效 ,就 得 写 好 几 遍 。 首 先是 
带 各 家 厂商 前 级 的 ， 最 后 一 行 才 是 W3C 标 准 规定 的 。 


这 样 做 的 结果 就 是 前 面 例子 中 的 CSS。 这 是 让 Flexbox 跨 浏览 器 的 唯一 有 效 方式 。 如 今 , 虽然 
厂商 很 少 再 加 前 级 ， 但 在 可 见 的 未 来 ， 仍 然 需 要 前 绥 来 保证 某 些 特性 跨 浏览 器 可 用 。Flexbox 算 
是 一 个 极端 的 例子 , 不 仅 涉 及 多 个 厂商 前 级 , 还 涉及 多 个 不 同 的 版 本 。 理解 并 记 住 当前 格式 怎么 
写 ， 以 前 的 格式 怎么 写 ， 简直 要 疯 掉 了 。 


不 管 你 怎么 看 , 反正 我 不 想 把 时 间 浪 费 在 写 这 些小 九 九 上 面 , 我 还 想 用 那些 时 间 干 点 更 有 意 
义 的 事 呢 。 简 言 之 ， 如 果 你 不 想 在 使 用 Flexbox 时 把 自己 气 疯 ， 赶 紧 找 一 个 自动 加 前 级 的 方法 吧 。 
e 自动 加 前 级 


为 了 避免 把 自己 台 疯 ， 同 时 还 能 轻松 准确 地 加 上 CSS 前 级 ， 可 以 找 一 个 自动 加 前 级 的 方法 。 
眼下 ， 我 使 用 Autoprefixer ( https://github.com/postcss/autoprefixer )。 这 是 一 个 很 快 、 准 确 而 且 安 
装 简便 的 PostCSS 捕 件 。 


Autoprefixer 针 对 各 种 情况 提供 了 很 多 版 本 ， 使 用 它 甚 至 不 需要 命令 行 构 建 工具 〈Gulp 或 
Grunt )。 如 果 你 使 用 Sublime Text， 有 一 个 版 本 可 以 让 你 直接 在 Command Palette 里 选择 使 用 它 : 
https://github.com/sindresorhus/sublime-autoprefixer。 此 外 还 有 针对 Atom、Brackets 和 Visual Studio 
的 版 本 。 


从 现在 开始 ， 除 非 演示 需要 ， 否 则 我 们 不 会 在 代码 示例 中 给 出 前 级 。 













































































3.3 使 用 Flexbox 
FE 至 二 由 是 廊 各 S| 次 序 利 沁 因 我 们 会 介绍 全 部 这 4 个 特性 ， 并 通过 示 
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例 说 明 它 们 的 关系 。 
示例 故意 写 得 非常 简单 ， 只 涉及 几 个 元 素 盒 子 以 及 它们 周围 的 内 容 。 这 样 可 以 方便 我 们 理解 
Flexbox 的 原理 。 
3.3.1 完美 垂直 居中 文本 





下 面 看 第 一 个 Flexbox 的 例子 ， 参 见 example 03-03, 





Layout example x 





AE 


araa 





HELLO, l'M CENTERED WITH FLEXBOX! 








标记 如 下 : 


«div class="CenterMe"> 


Hello, I'm centered with Flexbox! 
</div> 


垂直 居中 文本 的 CSS 规 则 如 下 : 


.CenterMe { 





background-color: indigo; 
color: #ebebeb; 
font-family: 'Oswald', sans-serif; 


font-size: 2rem; 
text-transform: uppercase; 
height: 200px; 

display: flex; 
align-items: center; 
justify-content: center; 


} 








以 上 CSS 代 码 中 大 部 分 都 用 来 设置 颜色 和 字号 大 小 。 


.CenterMe { 
/* 其 他 属性 
display: flex; 
align-items: center; 
justify-content: center; 


} 


之 前 没有 用 过 Flexbox 或 Box Alignment 规 范 ( https://www.w3.org/TR/css-align-3/ ) 中 相关 





下 面 这 三 个 属性 才 








我 们 真正 要 关注 的 : 





型 
HE 
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的 读者 ， 可 能 觉得 这 几 个 属性 有 点 另类 


ü display: flex: 





不 是 block 或 inline-block 之 类 的 )。 


口 align-items: 


o 下 面 我 们 一 个 一 个 介绍 o 




















这 是 Flexbox 的 根本 所 在 。 




















里 就 是 把 当前 元 素 设 置 为 一 个 Flexbox ( 而 


这 是 要 在 Flexbox 中 治 交叉 轴 对 章 项 目 〈 在 这 个 例子 中 垂直 居中 文本 )。 





口 justify-content: 


在 这 里 设置 内 容 沿 主轴 居中 。 





在 Flexbox 中 ， 





可 以 把 它 





想象 成 Word 





软件 中 的 一 个 按钮 ,用 于 左 、 中 、 右 对 齐 文本 ( 稍 后 我 们 会 介绍 ，justify-content 还 


有 其 他 值 )。 











好 ， 在 介绍 更 多 Flexbox 特 性 之 前 ， 我 们 会 再 看 几 个 例子 。 


4 


3.8.2 1m 


那 简单 的 导航 选项 呢 ， 怎 么 让 


"1 某 些 例 
Q 章 将 介绍 











j 子 使 用 了 Google 托 管 的 字体 Oswald ( 以 sans-serif 字 体 作 为 后 备 )。 第 5$ 


如 何 使 用 @font-face 规 则 链接 自 定义 字体 文件 。 


它们 水 平一 个 挨 一 个 排列 ? 








这 是 我 们 想 要 的 结果 : 
eee j Layout example x WD Ben me 
e [a Brar 








Home AboutUs Products Policy Contact Us 








这 是 标记 : 


«div class-"MenuWrap"» 





«a href="#" class-"ListItem"»Homec/a» 
«a href="#" class-"ListItem"»-About Us</a> 
«a href="#" class-"ListItem"»Products«/a» 
«a href="#" class-"ListItem"»Policy«/a» 
«a href="#" class-"LastItem"»Contact Us«/a» 
«/div» 
这 是 CSS : 


.MenuWrap { 


background-color: indigo; 
font-family: 'Oswald', sans-serif; 
font-size: lrem; 

min-height: 2.75rem; 

display: flex; 

align-items: center; 

padding: 0 1rem; 
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.ListItem, 

.LastItem { 
color: #ebebeb; 
text-decoration: none; 


} 


.ListItem { 
margin-right: 1rem; 


} 


.LastItem { 
margin-left: auto; 


} 


怎么 样 ?! 没有 浮动 ( float ), RATNIK (inline-block), 也 没有 表 元 (table-cell )。 
在 包含 元 素 上 设置 aisplay: flexbox; 后 ， 其 子 元 素 就 会 变 成 弹性 项 〈flex-item )， 从 而 在 弹性 
布局 模型 下 布局 。 这 里 的 “魔法 ”属性 是 margin-left: auto， 它 让 最 后 一 项 用 上 该 侧 所 有 可 
用 的 外 边 距 。 








3.33 RF 
如 果 想 让 所 有 项 反 序 排列 呢 ? 像 这 样 : 





© O O | ^ Layout example x m. 


e [a1 Jaf?róáeo vos 


Contact Us Policy Products AboutUs Home 


























简单 ,给 包含 元 素 的 CSS 加 一 行 fl1ex-direction: row-reverse, 把 最 后 一 项 的 margin- 
left: auto 改 成 margin-right: auto: 











.MenuWrap { 
background-color: indigo; 
font-family: 'Oswald', sans-serif; 
font-size: lrem; 
min-height: 2.75rem; 
display: flex; 
flex-direction: row-reverse; 
align-items: center; 
padding: 0 1rem; 

} 


.ListItem, 

.LastItem { 
color: #ebebeb; 
text-decoration: none; 
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.ListItem ( 
margin-right: lrem; 


j 
.LastItem ( 


margin-right: auto; 


) 
1. 垂直 排列 














如 果 想 让 所 有 项 垂直 堆肥 排列 怎么 办 ? 简单 。 在 包含 元 素 中 使 用 flex-airection: EE 

















column; ， 再 把 自动 外 边 距 属性 删 掉 : 











.MenuWrap { 
background-color: indigo; 
font-family: 'Oswald', sans-serif; 
font-size: lrem; 
min-height: 2.75rem; 
display: flex; 
flex-direction: column; 
align-items: center; 
padding: 0 1rem; 

} 


.ListItem, 

.LastItem ( 
color: #ebebeb; 
text-decoration: none; 


} 
2. 垂直 反 序 


想 让 各 项 垂直 反 序 堆 徐 ? Hiprflex-direction: column-reverse; 就 行 了 。 





要 知道 ， 有 一 个 flex-flow 属 性 ， 是 flex-direction 和 flex-wrap 的 合 
体 。 比 如 ，flex-flow: row wrap; 就 是 把 方向 (flex-direction) 设置 为 
行 ( row )， 把 折 行 选项 设置 为 折 行 (wrap )。 不过， 至 少 一 开始 分 别 设置 两 个 
属性 会 更 清楚 一 些 。 另 外 ，flex-wrap 属 性 在 最 早 的 Flexbox 实 现 中 也 不 存在 ， 
如 果 合 起 来 写 ， 在 某 些 浏览 器 中 可 能 导致 整 条 声明 失效 。 


3.8.4 不 同 媒体 查询 中 的 不 同 Flexbox 布局 


顾名思义 ，Flexbox 就 是 可 以 灵活 变化 的 。 要 是 我 们 想 在 罕 视 口中 让 各 项 垂直 堆 琶 ， 而 在 空 
间 人 允许 的 情况 下 改 成 行 式 布局 呢 ? 使 用 Flexbox 这 是 “小 菜 一 碟 ”: 





























.MenuWrap { 
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background-color: indigo; 
font-family: 'Oswald', sans-serif; 
font-size: lrem; 
min-height: 2.75rem; 
display: flex; 
flex-direction: column; 
align-items: center; 
padding: 0 1rem; 

} 


@media (min-width: 31.25em) { 
.MenuWrap { 
flex-direction: row; 
j 
} 


.ListItem, 

.LastItem { 
color: #ebebeb; 
text-decoration: none; 


} 


@media (min-width: 31.25em) { 
.ListItem { 
margin-right: 1rem; 
} 
.LastItem { 
margin-left: auto; 
} 
} 


真实 的 例子 ， 请 看 example 03-05。 别 忘 了 缩放 浏览 器 窗口 ， 这 样 才能 看 到 不 同 的 布局 。 


3.8.5 “行内 伸缩 


Flexbox 与 有 与 inline-block 和 inline-table 对 应 的 inline-flex 变 体 。 得 益 于 它 的 居 



































中 能 力 ， 通 过 行内 伸缩 模型 可 以 轻松 实现 一 些 搞怪 的 效果 ， 比 如 : 
eoe NS CAES x Ben 
e ceca 回放 oz 
Here is a sentence with a 
HTML 标 记 : 


<p>Here is a sentence with a «a href-"http://www.w3.org/TR/cssflexbox- 
1/tflex-containers" class-"InlineFlex"»inline-flex link«/a».«/p» 
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CSS 样 式 : 


.InlineFlex { 
display: inline-flex; 
align-items: center; 
height: 120px; 
padding: 0 4px; 
background-color: indigo; 
text-decoration: none; 
border-radius: 3px; 
color: #ddd; 

) 





如 果 将 某 元 素 无 端 地 设置 为 aisplay: inline-flex (比如 包含 该 元 素 的 元 素 没有 被 设置 
为 display: flex)， 那 么 这 个 元 素 就 会 像 inline-block 和 inline-table 一 样 保留 元 素 间 的 
空白 。 如 果 这 个 元 素 处 于 一 个 Flexbox 中 ， 空 白 就 会 消失 ， 就 跟 table 中 的 table-cell 一 样 。 


当然 ,不 一 定 总 要 居中 项 。 除 了 居中 ， 还 有 其 他 可 能 ， 下 面 就 来 看 一 下 。 


3.3.6 Flexbox 的 对 齐 


相关 的 示例 请 参考 example 03-07。 记 住 ， 你 看 到 的 代码 可 能 是 本 节 结 束 时 的 状态 ， 因 此 如 








果 你 想 保持 同步 ， 很 可 能 需要 删除 其 中 的 CSS， 然 后 从 头 开始 写 起 。 





关于 Flexbox 的 对 齐 ， 最 重要 的 是 理解 坐标 轴 。 有 两 个 轴 ,“ 主 轴 ” 和 “交叉 轴 "”。 这 两 个 轴 
代表 什么 取决 于 Flexbox 排 列 的 方向 。 比 如 ， 如 果 将 Flexbox 的 方向 设置 为 row， 则 主轴 就 是 横 轴 ， 


而 交叉 轴 就 是 纵 轴 。 





反之 ， 如 果 Flexbox 的 方向 是 column， 则 主轴 就 是 纵 轴 ， 而 交叉 轴 为 横 轴 。 


Flexbox 规 范 ( https://www.w3.org/TR/css-flexbox-1/Zjustify-content-property ) 给 出 了 一 个 图 来 








向 大 家 解释 : 
主轴 方向 大 小 
oC 
- - - 交 又 轴 起 点 
b 
R 主轴 
4| È 
A 
«| 部 元 素 [scs - - 交 又 轴 终 点 
: 弹性 容器 i 
主轴 xm 主轴 
2 终点 
id 
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先 看 一 下 我 们 示例 的 HTML 标 记 : 





<div class="FlexWrapper"> 


«div class-"FlexInner"»I am content in the inner Flexbox.</div> 
</div> 


接 下 来 看 Flexbox 相 关 的 样式 : 


.FlexWrapper { 
background-color: indigo; 
display: flex; 
height: 200px; 
width: 400px; 

} 


.FlexlInner { 
background-color: #34005B; 
display: flex; 
height: 100px; 
width: 200px; 
} 





浏览 需 中 的 效果 如 下 : 
eoo Layout example x Ben 
c 加 f? é$ Q 0 = 


l am content in the inner 
Flexbox. 














我 们 分 别 来 测试 对 齐 相 关 的 属性 。 





"uni 


1. align-items 








align-items 在 交叉 轴 上 定位 元 素 。 如 果 给 包装 元 素 像 下 面 这 样 应 用 这 个 


38] 


.FlexWrapper { 
background-color: indigo; 
display: flex; 
height: 200px; 
width: 400px; 
align-items: center; 


) 
可 想 而 知 ， 内 部 的 元 素 会 垂直 居中 : 
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eoe Layout example x Ben 


e al as aA oz 





lam content in the inner 
Flexbox. 











同样 的 效果 会 应 用 给 其 中 的 所 有 子 元 素 。 


2.align-self 








有 时候 ， 可 能 只 需要 把 某 一 个 元 素 按 不 同方 式 对 齐 。 这 个 元 素 可 以 使 用 align-self 属 性 决 
定 自己 的 对 齐 方式 。 此 时 , 需要 删除 前 面 针 对 所 有 子 元 素 的 对 齐 属性 ， 并 在 标记 中 再 添加 两 个 具 
有 相同 HTML 类 名 ( .FlexInner 类 ) 的 元 素 。 男 外 ， 在 中 间 的 子 元 素 上 再 添加 .Alignself 类 ， 
通过 它 来 应 用 align-self 属 性 。 看 CSS 更 容易 理解 : 


















































.FlexWrapper { 
background-color: indigo; 
display: flex; 
height: 200px; 
width: 400px; 

} 

.FlexInner { 
background-color: #34005B; 
display: flex; 
height: 100px; 
width: 200px; 





} 
.AlignSelf { 


align-self: flex-end; 


} 
浏览 器 中 的 效果 如 下 : 














lam content in the 
inner Flexbox 3. 


| am content in the 
inner Flexbox 2. 
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哇 ，Flexbox 实 现 这 些 效 果 太 简单 了 ! 这 里 将 align-self 的 值 设 置 为 f1ex-end。 在 介绍 沿 
主轴 对 齐 的 属性 之 前 ， 我 们 先 把 沿 交 义 轴 对 齐 的 各 种 可 能 性 过 一 遍 。 


3. 交叉 轴 的 对 齐 
Flexbox 为 交 又 轴 对 齐 提供 了 以 下 值 。 


口 flex-start: 把 元 素 的 对 齐 设置 为 flex-start, 可 以 让 元 素 从 Flexbox 父 元 素 的 起 始 边 
开始 。 

O flex-end: 把 元 素 的 对 齐 设置 为 fl1ex-end， 会 沿 Flexbox 父 元 素 的 末尾 对 齐 该 元 素 。 

口 center: 把 元 素 放 在 Flexbox 元 素 的 中 间 。 

O baseline: 让 Flexbox 元 素 中 的 所 有 项 沿 基线 对 齐 。 

O stretch: 让 Flexbox 中 的 所 有 项 ( 没 交叉 轴 ) 拉 伸 至 与 父 元 素 一 样 大 。 


























使 用 这 些 属 性 时 可 能 会 遇 到 一 些 特殊 的 问题 ， 届 时 可 以 参考 规范 中 给 出 的 
S 一 些 特殊 情况 的 例子 : http:/www.w3.org/TR/css-flexbox-1/。 


4. justify-content 





控制 沿 Flexbox 主 轴 对 齐 的 属性 是 justify-content (对 于 非 Flexbox/ 块 级 元 素 ， 也 已 经 有 
了 关于 justify-self 属 性 的 建议 : https:/www.w3.org/TR/css-align-3/ )。justify-content 属 
性 的 可 能 值 包括 : 











Q flex-start 

ü flex-end 

L] center 

口 space-between 


口 space-around 


前 三 个 属性 跟 你 想象 的 一 致 。 我 们 主要 看 看 space-petween 和 space-around。 以 下 面 标 
记 为 例 : 














<div class="FlexWrapper"> 
«div class="FlexInner">I am content in the inner Flexbox 1.«/div» 
«div class-"FlexInner"»I am content in the inner Flexbox 2.«/div» 
«div class-"FlexInner"»I am content in the inner Flexbox 3.«/div» 
</div> 


再 看 以 下 CSS。 我 们 把 每 个 内 部 元 素 (FlexInner ) 的 宽度 都 设置 为 25%， 包 含 它们 的 容器 
Flexbox ( Flexwrapper ) 的 宽度 为 100%。 


























.Flexwrapper { 
background-color: indigo; 
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display: flex; 
justify-content: space-between; 
height: 200px; 
width: 1003; 
} 
.FlexInner { 
background-color: #34005B; 
display: flex; 
height: 100px; 
width: 25$; 





} 

因为 三 个 子 元 素 只 占 75% 的 空间 ， 所 以 justify-content 可 以 告诉 浏览 器 怎么 处 理 其 余 空 
间 。space-between 会 在 子 元 素 之 间 添 加 相同 宽度 的 空白 ， 而 space-aroundq 则 在 它们 两 边 各 
添加 相同 宽度 的 空白 。 下 图 演示 的 是 使 用 space-between 后 的 效果 : 

















eee Layout example x Ben 





eal cefeaoo 0 = 
lam content in the inner Flexbox 1. lam content in the inner Flexbox 2. lam content in the inner Flexbox 3. 

















下 图 演示 的 是 使 用 space-around 后 的 效果 : 








eec Layout example x Ben 
e ja & feéa oz 
lam content in the inner Flexbox 1. lam content in the inner Flexbox 2. lam content in the inner Flexbox 3. 

















这 两 个 值 就 是 这 样 ， 简 单 好 用 ， 对 吧 ? 


Flexbox 的 各 种 对 齐 属性 在 CSS Box Alignment Module Level 3 中 实现 了 标准 
A 化 。 这 个 标准 对 其 他 display 属 性 也 规范 了 基础 性 的 对 齐 行为 ， 包 括 display : 
block; f» display: table; ， 而 且 还 在 制定 过 程 中 ， 网 址 是 . 
https://www.w3.org/TR/css-align-3/ 
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3.3.7 flex 


前 面 已 经 给 伸缩 项 ( flex-item ) 定义 过 宽度 了 。 除 了 wiat 








h， 还 可 以 通过 flex 属 性 来 定义 宽 








度 ， 或 者 叫 “ 伸 缩 性 ”( flexiness )。 再 看 另 一 个 例子 ， 同 样 的 标记 ， 但 CSS 有 所 不 同 : 


.FlexlInner { 
border: 1px solid #ebebeb; 
background-color: #34005B; 
display: flex; 
height: 100px; 
flex: 1; 

} 


这 里 的 flex 实 际 上 是 三 个 属性 合体 的 简写 : flex-grow 




















、flex-shrink 和 flex-basis。 


关于 这 三 个 属性 的 详细 介绍 ， 可 以 参考 规范 原文 : https:/www.w3.org/TR/css-flexbox-1/。 不 过 ， 

















规范 还 是 建议 大 家 使 用 f1ex 这 个 简写 属性 ， 也 就 是 我 们 这 里 月 











目的 这 个 ， 明 白 吗 ? 





flex: 1 1 1 
a 


伸展 收缩 





00px 
| 


基准 











对 于 伸缩 项 ， 如 果 flex 属 性 存在 〈 且 浏览 器 支持 )， 则 使 用 它 的 值 控 制 元 素 的 大 小 ， 忽 略 











mM om 





性 。 





况 下 可 以 伸展 的 量 。 


























度 和 高 度 值 的 设置 ， 即 使 它们 的 声明 位 于 flex 声 明之 后 ， 也 会 被 忽略 。 下 面 分 别 看 看 这 三 个 





口 flex-grow( 传 给 flex 的 第 一 个 值 ) 是 相对 于 其 他 伸缩 项 ， 当 前 伸缩 项 在 空间 允许 的 情 


口 flex-shrink 是 在 空间 不 够 的 情况 下 ， 当 前 伸缩 项 相对 于 其 他 伸缩 项 可 以 收缩 的 量 。 
O flex-basis ( 传 给 flex 的 最 后 一 个 值 ) 是 伸缩 项 伸缩 的 基准 值 。 


虽然 只 写 flex: 1 也 没 问题 ,但 还 是 建议 大 家 把 三 个 值 写 全 。 这 样 才 能 更 清楚 地 表明 你 想 干 














什么 。 比 如 flex: 1 2 auto 的 意思 是 在 有 空间 的 情况 下 可 以 伸展 1 部 分 ， 在 空间 不 足 时 可 以 收 
缩 1 部 分 ， 而 基准 大 小 是 内 容 的 固有 宽度 即 不 伸缩 的 情况 下 内 容 的 大 小 )。 


再 试 一 个 : flex: 0 0 50px 的 意思 是 ， 这 个 伸缩 项 既 不 伸 也 不 缩 ， 基 准 为 50 像 素 ( 即 无 论 











是 否 存在 自由 空间 ， 都 是 50 像 素 )。 那么 f1ex: 2 0 50% 呢 ? 





























意思 就 是 会 多 占用 两 个 可 用 空间 ， 








不 收缩 ， 基 准 为 530%。 但 愿 这 几 个 例子 能 帮 大 家 理解 Et1ex 属 性 





É o 
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«M 


将 flex-shrink 的 值 设置 为 0，flex-basis 实 际 上 就 相当 于 最 小 宽度 。 





可 以 把 flex 属 性 想象 成 设置 比例 。 如 果 每 一 项 都 设置 为 1， 则 它们 会 占用 相等 的 空间 : 








eec Layout example x Ben 


e file///Users/benfrain/Documents/Storage/articles/rwd/code/ch3/example 03-07/ndexhtml ;; Cj f? & Q oz 


| am content in the inner Flexbox 1. | am content in the inner Flexhox 2. | am content in the inner Flexbox 3. 











好 ， 为 了 验证 前 面 的 理论 ， 我 们 修改 了 标记 的 HIML 类 : 


«div class-"FlexWrapper"- 


«div class-"FlexItems FlexOne"»-I am content in the inner Flexbox 
1.«/div» 


«div class-"FlexItems FlexTwo"»-I am content in the inner Flexbox 
2.«/div» 


«div class-"FlexItems FlexThree"»I am content in the inner Flexbox 
3.«/div» 


</div> 


修改 后 的 CSS 变 成 了 这 样 : 








.FlexItems ( 
border: 1px solid #ebebeb; 
background-color: #34005B; 
display: flex; 
height: 100px; 

} 


.FlexOne { 
flex: 1.5 0 auto; 
} 


.FlexTwo, 
.FlexThree { 
flex: 1 0 auto; 


} 

在 这 个 例子 中 ，Flexone 占 用 的 空间 是 FlexTwo 和 FlexThree 所 占用 空间 的 1.5 倍 。 

这 个 简写 的 属性 对 于 迅速 地 厘清 伸缩 项 间 的 关系 非常 有 帮助 。 比 如 ， 客 户 说 了 :“ 这 个 要 比 
其 他 的 宽 1.8 倍 。” 使 用 flex 属 性 可 以 轻松 满足 这 个 要 求 。 
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好 了 ， 你 多 少 理解 超 强大 的 ELex 属 性 了 吧 ? 


关于 Flexbox ， 我 还 可 以 再 多 写 几 章 。 可 以 拿 出 来 分 享 的 例子 实在 是 太 丰 富 了 ， 但 我 们 只 能 
到 此 为 止 了 。 接 下 来 ， 在 介绍 本 章 另 一 个 主题 ( 响应 式 图 片 ) 之 前 ， 我 还 想 跟 大 家 交待 两 件 事 。 























pur 





3.3.8 简单 的 粘 附 页 脚 


假设 你 在 页 面 内容 不 够 长 时 , 仍然 想 让 页 脚 停留 在 视 口 底部 。 这 个 需求 一 直 以 来 都 很 难 实现 ， 
但 使 用 Flexbox 会 变 得 很 容易 。 看 下 面 的 标记 ( 对 应 example_03-08 ): 








<body> 
<div class="MainContent"> 
Here is a bunch of text up at the top. But there isn't enough 
content to push the footer to the bottom of the page. 
</div> 
«div class="Footer"> 
However, thanks to flexbox, I've been put in my place. 
</div> 
</body> 


CSS 如 下 : 


html, 
body ( 
margin: 0; 
padding: 0; 
j 


html ( 
height: 100$; 
} 


body { 
font-family: 'Oswald', sans-serif; 
color: #ebebeb; 
display: flex; 
flex-direction: column; 
min-height: 100$; 

} 


.MainContent { 
flex: 1; 
color: $333; 
padding: .5rem; 
} 


.Footer { 
background-color: violet; 
padding: .5rem; 
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打开 浏览 


部 ; 而 在 内 容 够 多 时 ， 


CEA 





这 个 例子 的 原理 是 Elex 属 性 




















给 .Maincontentaiv 添 加 更 多 内 容 。 在 内 容 不 够 多 时 ， 页 脚 一 直 驻 留 底 
页 脚 会 位 于 内 容 下 方 。 


会 让 内 容 在 空间 允许 的 情况 下 伸展 。 因 为 页 面 主体 是 伸缩 容器 ， 





最 小 高 度 是 100%， 所 以 主 内 容 区 会 尽 可 能 占据 所 有 有 效 空间 。 完 美 ! 


3.8.9 改变 原始 次 序 


自从 有 了 CSS 以 来 ， 就 只 有 一 种 方法 可 以 改变 网 页 中 HIML 元 素 的 视觉 次 序 。 那 就 是 把 元 素 
包 在 一 个 设置 为 aisplay: table 的 容器 内 , 然后 切换 内 部 元 素 的 aisplay 属 性 。 想 放 到 前 头 的 ， 





就 切换 成 aisplay: 











table-caption; 想 放 在 底部 的 , 就 切换 成 display : table-footer- 


group; 或 者 想 放 在 第 二 位 的 (位 于 display: E o 就 切换 成 aisplay: 
table-header-group。 尽 管 这 个 做 法 很 靠 谱 ， 但 只 能 说 它 是 个 令 人 惊喜 的 意外 ， 人 家 本 来 就 





4 


不 是 干 这 个 用 的 ! 








不 过 ，Flexbox 却 内 置 了 重新 排序 的 能 力 。 下 面 我 们 来 演示 一 下 。 

















以 下 面 的 标记 为 例 : 
<div class="FlexWrapper"> 

<div class="FlexItems 
div> 

<div class="FlexItems 
div> 

<div class="FlexItems 
div» 

«div class-"FlexItems 
div» 

«div class-"FlexItems 
div» 
«/div» 


可 以 看 到 标记 中 容 需 内 的 第 三 项 有 一 个 HTML 类 叫 Flexcontent ,假设 这 个 元 素 中 包含 的 是 
页 面 的 主 内 容 。 


Fl 


F 


Fl 


Fl 


Fl 





exHeader"»I am content in the Header.«/ 


lexSideOne"»I am content in the SideOne.«/ 


exContent"»I am content in the Content .</ 


exSideTwo"»I am content in the SideTwo.</ 





exFooter"»I am content in the Footer.«/ 

















好 了 ,我 们 简单 点 ， 通 过 颜色 来 区 分 每 一 项 ， 先 让 它们 按照 在 HTML 标 记 中 的 顺序 出 场 : 


.Flexwrapper { 


background-color: 


display: flex; 
flex-direction: column; 


.FlexlItems ( 
display: flex; 
align-items: 
min-height: 6 


center; 
.25rem; 


indigo; 
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padding: lrem; 


.FlexHeader { 
background-color: #105B63; 


.FlexContent { 
background-color: #FFFAD5; 


.FlexSideOne { 
background-color: #FFD34E; 


.FlexSideTwo { 
background-color: #DB9E36; 


.FlexFooter { 
background-color: #BD4932; 
} 


浏览 器 演 染 效果 如 下 : 


eoe j | Layout example " Ben 


C [D fle//Usesb..;; B f? & & è MN m 


lam content in the Header. 


lam content in the SideTwo. 


lam content in the Footer. 
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现在 ,假设 需要 把 .Flexcontent 的 次 序 调 整 为 第 一 项 ， 又 不 能 修改 标记 。 对 于 Flexbox， 只 
要 添加 一 行 CSS 声 明 
.FlexContent ( 


background-color: 
order: 


} 


-1; 


#FFFAD5; 


这 里 的 order 属 性 可 以 在 Flexbox 中 简单 、 明 确 地 修改 元 素 的 次 序 。 此 处 的 -1 表示 要 位 于 其 
他 所 有 元 素 之 前 。 





y 假如 需要 更 改 次 序 的 元 素 很 多 ， 建 议 再 明确 一 些 ， 为 每 个 元 素 添加 序列 号 。 3 
Q 这 样 才 能 在 与 媒体 查询 一 块 使 用 时 ， 更 容易 理解 。 








下 面 我 们 把 改变 原始 次 序 的 能 力 附加 到 媒体 查询 上 , 让 不 同 的 屏幕 不 仅 得 到 不 同 的 布局 ,而 





且 次 序 也 会 变化 。 


[ BE. 完成 的 例子 可 以 参考 example 03-09, 














邮 
电 因为 把 主 内 容 放 在 页 面 开头 是 个 聪明 的 做 法 ， 所 以 我 们 把 前 面 的 标记 修改 如 下 : 
<div class="FlexWrapper"> 
«div class="FlexItems FlexContent">I am content in the Content.</ 
div» 
«div class-"FlexItems FlexSideOne"»I am content in the SideOne.«/ 
div» 
«div class-"FlexItems FlexSideTwo"»I am content in the SideTwo.«/ 
div» 
«div class-"FlexItems FlexHeader"»I am content in the Header.«/ 
div» 
«div class-"FlexItems FlexFooter"»I am content in the Footer.«/ 
div» 
«/div» 




















一 上 来 就 是 页 面 内 容 , 接着 是 两 个 边栏 区 , 然后 才 是 页 头 和 最 后 的 页 脚 。 既 然 要 使 用 Flexbox， 
那 HTML 结 构 就 可 以 按照 文档 的 要 求 来 组 织 ， 跟 视觉 展示 区 分 开 来 。 

对 最 小 的 屏幕 ( 在 所 有 媒体 查询 外 部 )， 是 这 样 的 顺序 : 

.FlexHeader { 


background-color: 
order: 


) 


1; 


.FlexContent { 
background-color: 





#105B63; 


#FFFAD5; 
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.FlexSideOne { 
background-color: #FFD34E; 
order: 3; 


} 


.FlexSideTwo { 


background-color: #DB9E36; 
order: 4; 


} 


.FlexFooter { 
background-color: #BD4932; 
order: 5; 


) 
浏览 需 中 看 到 的 是 这 样 的 结 





eee | j DÒ Layout example x W Ben 


-»e(  ——sfraesems 

















IF content in the Header. 


lam content in the SideTwo. 


lam content in the Footer. 





接 下 来 ， 在 某 个 断 点 ， 把 顺序 改 成 这 样 : 


Gmedia (min-width: 30rem) ( 
.FlexWrapper { 
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flex-flow: row wrap; 
} 
.FlexHeader { 

width: 1003; 


} 

.FlexContent { 
flex: 1; 
order: 3; 

} 


.FlexSideOne { 
width: 150px; 
order: 2; 

} 

.FlexSideTwo { 
width: 150px; 
order: 4; 





} 
.FlexFooter { 
width: 1003; 
j 
j 


浏览 需 中 的 效果 变 成 了 这 样 : 





|] Layout example x 


ela araa 


lam content in the Header. 


Yam content in the 


SideTwo. 


lam content in the Footer. 














j 这 个 例子 中 用 到 了 flex-flow: row wrapb。 这 个 属性 可 以 让 伸缩 项 折 行 。 
但 有 些 老 浏览 器 对 这 个 属性 的 支持 不 好 。 因 此 视 要 向 后 兼容 的 力度 ， 可 能 需要 
把 内 容 和 两 个 侧 边栏 封装 在 另 一 个 元 素 中 。 
3.3.10 Flexbox 小 结 
使 用 Flexbox 可 以 实现 无 数 种 可 能 的 布局 ， 而 且 得 益 于 其 “伸缩 性 "， 这 种 布局 机 制 非常 适合 


V 
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响应 式 设计 。 如 果 此 前 你 从 未 用 过 Flexbox， 可 能 会 觉得 这 些 新 属性 和 值 有 点 奇怪 ， 但 使 用 它们 
却 可 以 轻易 实现 以 往 非 常 麻烦 才能 实现 的 布局 。 为 了 确保 与 最 新 的 规范 一 致 ， 别 忘 了 抽 时 间 研 读 
一 下 规范 的 最 新 版 本 : https://www.w3.org/TR/css-flexbox-1/. 











相信 你 会 喜欢 上 Flexbox 的 。 


Flexible Box Layout Module 之 后 马上 是 Grid Layout Module Level 1: 
https://www.w3.org/TR/css3-grid-layout/。 
相对 于 Flexbox 而 言 , Grid Layout 还 没 那 么 成 熟 ( 与 Flexbox 一 样 , Gird Layout 
也 已 经 有 了 几 次 大 的 迭代 )， 因 此 我 们 就 不 在 这 里 再 讨论 了 。 但 这 个 规范 绝对 需 
要 关注 ， 因 为 它 预 期 要 给 我 们 提供 更 强大 的 布局 功能 。 


3.4 ”响应 式 图 片 


根据 用 户 的 设备 和 使 用 场景 提供 合适 的 图 片 并 不 容易 。 自 从 响应 式 设计 的 概念 问世 , 这 个 问 
题 就 一 直 备 受 关注 ， 问 题 的 核心 是 如 何 只 写 一 遍 代 码 ， 就 能 适用 所 有 设备 。 




















3.4.1 响应 式 图 片 的 固有 问题 
开发 者 不 可 能 知道 或 预见 浏览 网 站 的 所 有 设备 , 只 有 浏览 锅 在 打开 和 泻 染 内容 时 才 会 知道 使 
用 它 的 设备 的 具体 情况 ( 屏幕 大 小 、 设 备 能 力 等 )。 
另 一 方面 ， 只 有 开发 者 (你 和 我 ) 知道 自己 手 里 有 儿 种 大 小 的 图 片 。 比 如 ,我 们 有 同一 图 片 
的 三 个 版 本 ， 分 别 是 小 、 中 、 大 ,分别 对 应 于 相应 的 屏幕 大 小 和 分 辨 率 。 浏 览 器 不 知道 这 些 , 我 
们 得 想 办 法 让 它 知 道 。 
































合适 的 图 片 大 小 和 分 辩 率 是 多 少 ， 两 个 关键 因素 无 法 融合 。 
怎么 才能 告诉 浏览 器 我 们 准备 了 哪些 图 片 ， 让 它 视 情况 去 选择 最 合适 的 呢 ? 


响应 式 设计 刚刚 出 现 的 几 年 里 , 并 没有 固定 的 方法 。 今 天 , 我 们 有 了 Embedded Content 规 范 : 
https://html.spec.whatwg.org/multipage/embedded-content.html。 

Embedded Content 规 范 描述 了 如 何 进行 简单 的 图 片 分 状 紊 切换 ( 让 拥有 高 分 状 率 屏幕 的 用 户 
看 到 高 分 辩 率 的 图 片 )， 以 及 支持 “文艺 范 儿 ”( art direction )， 即 可 以 根据 视 口 空间 大 小 显示 完 
全 不 同 的 图 片 ( 类 似 媒体 查询 )。 


演示 响应 式 图 片 的 例子 也 挺 难 的 , 不 可 能 在 一 块 屏 幕 上 同时 让 大 家 欣赏 到 所 有 图 片 , 没有 什 
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么 特别 的 语法 或 技术 。 因 此 ， 接 下 来 的 例子 主要 以 代码 展示 为 主 ， 请 大 家 相信 我 ， 我 说 能 在 支持 
的 浏览 器 里 产生 什么 结果 就 会 产生 什么 结 

接 下 来 我 们 看 两 个 响应 式 图 片 的 典型 应 用 场景 分别 是 切换 同一 张 图 片 的 不 同 分 辨 率 的 版 
本 ， 以 及 根据 视 口 大 小 使 用 不 同 的 图 片 。 





3.4.2 通过 srcset 切换 分 辨 率 


假设 一 张 图 片 有 三 种 分 辩 率 的 版 本 , 一 张 小 的 针对 小 屏幕 ,一 个 中 等 的 针对 中 等 屏幕 ,还 有 
一 个 比较 大 的 针对 所 有 其 他 屏幕 。 要 让 浏览 器 知道 这 三 个 版 本 ， 怎 么 办 呢 ? 看 代码 : 


«img src-"scones small.jpg" srcset-"scones medium.jpg 1.5x, scones_ 
large.jpg 2x" alt-"Scones taste amazing"» 


这 是 实现 响应 式 图 片 的 最 简单 语法 ,我们 必须 把 它 完全 搞 明白 。 


首先 ，src 属 性 是 大 家 已 经 熟悉 的 ， 它 在 这 里 有 两 个 角色 。 一 是 指定 1 倍 大 小 的 小 图 片 ， 二 
是 在 不 文 持 srcset 属 性 的 浏览 器 中 用 作 后 备 。 正 因为 如 此 ， 我 们 才 给 它 指定 了 最 小 的 图 片 ， 好 
让 旧版 本 的 浏览 器 以 最 快 的 速度 取得 它 。 


对 于 支持 srcset 属 性 的 浏览 右 , 通 过 逗号 分 隔 的 图 片 描 述 , 让 浏览 融 自 己 决定 选择 哪 一 个 。 
图 片 描述 首先 是 图 片 名 ( 如 scones_medium.jpg )， 然 后 是 一 个 分 状 率 说 明 。 本 例 中 用 的 是 1.5x 和 
2x， 其 中 的 数字 可 以 是 任意 整数 ， 比 如 3x 或 4x 都 可 以 ( 如 果 你 的 用 户 可 能 使 用 那么 高 分 辨 率 的 
屏幕 )。 


不 过 有 个 问题 。1440 像 素 宽 、1x 的 屏幕 会 拿 到 跟 480 像 素 宽 、3x 的 屏幕 相同 的 图 片 。 这 或 许 
并 不 是 我 们 想 要 的 结果 。 



































































































































3.4.8 srcset 及 sizes 联合 切换 


再 看 另 一 种 情况 。 在 响应 式 设 计 中 ,经 常 可 以 看 到 小 屏幕 中 全 屏 显 示 ， 而 在 大 屏幕 上 只 显示 
一 半 宽 的 图 片 。 第 1 章 中 的 例子 就 是 这 样 。 要 把 我 们 的 意图 告诉 浏览 器 ， 怎 么 办 呢 ? THX. 























«img srcset-"scones-small.jpg 450w, scones-medium.jpg 900w" 
sizes=" (min-width: 17em) 100vw, (min-width: 40em) 50vw" src-"sconessmall. 
jpg" alt-"Scones"'» 


这 里 照样 使 用 了 srcset 属 性 。 不 过 , 这 一 次 在 指定 图 片 描述 时 , 我 们 添加 了 以 w 为 后 缀 的 值 。 
这 个 值 的 意思 是 告诉 浏览 器 图 片 有 多 宽 。 这 里 表示 图 片 分 别 是 450 像 素 宽 ( scones-smalljpg ) 和 
900 像 素 宽 ( scones-medium.jpg )。 但 这 里 以 w 为 后 缀 的 值 并 不 是 “真实 ”大 小 ， 它 只 是 对 浏览 
的 一 个 提示 ， 大 致 等 于 图 片 的 “CSS 像 素 ” 大 小 。 
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y CSS 中 如 何 定义 像素 ? 我 原来 也 说 不 清 。 后 来 我 找到 了 答案 : 
https://www.w3.org/TR/css3-values/， 我 可 能 已 经 明白 了 。 





使 用 w 后 绥 的 值 对 引入 sizes 属 性 非常 重要 。 通 过 后 者 可 以 把 意图 传达 给 浏览 器 。 在 前 面 的 
例子 中 ， 我 们 用 第 一 个 值 告诉 浏览 器 “在 最 小 宽度 为 17em 的 设备 中 ， 我 想 让 图 片 显示 的 宽度 约 
为 100vw”。 





如 果 你 不 知道 有 些 单 位 的 含义 ， 比 如 vh ( 视 口 高 度 的 1% ) 或 vw ( 视 口 宽度 
> 的 1% )， 请 看 第 5 章 。 




















sizes 属 性 的 第 二 个 值 ， RERE I, 浏览 器 ， 如 果 设 备 宽度 大 于 等 于 40em， 我 只 想 让 
对 应 的 图 片 显 示 为 50vw 宽 ”"。 我 们 用 DPI ( 或 表示 Device Pixel Ratio 的 DPR， 即 设备 像素 比 ) 来 解 
释 就 明白 了 。 比 如 ， 如 果 设 备 宽 度 是 320 像 素 ， 而 分 辩 率 为 2x ( 实际 宽度 是 640 像 素 )， 那 浏览 器 
可 能 会 选择 900 像 素 宽 的 图 片 , 因为 对 当前 屏幕 宽度 而 言 , 它 是 第 一 个 符合 要 求 的 足够 大 的 图 片 。 

你 说 浏览 器 “可 能 会 ”是 什么 意思 

要 知道 ，sizes 属 性 仅仅 是 对 浏览 咒 给 出 提示 。 因 此 并 不 保证 浏览 需 言 听 计 从 。 这 样 很 好 ， 
真 的 ,因为 如 果 将 来 有 了 让 浏览 器 判断 网 络 条 件 的 可 靠 方式 ， 它 可 能 会 选择 不 同 的 图 片 。 毕 竟 浏 
览 器 才 在 一 线 ， 它 知道 的 我 们 开发 者 事先 不 可 能 知道 。 假 如 有 用 户 设置 自己 的 设备 “只 下 载 1x 
图 片 ”或 “只 下 载 2x 图 片 ”， 那 浏览 器 就 可 做 出 最 佳 决定 。 

如 果 不 想 让 浏览 器 决定 , 可 以 使 用 picture 元 素 。 使 用 这 个 元 素 可 以 让 浏览 器 交付 你 让 它 交 
付 的 图 片 。 下 面 介 绍 这 个 元 素 的 原理 。 













































































3.4.4 picture 元 素 


最 后 一 种 情况 就 是 你 希望 为 不 同 的 视 口 提供 不 同 的 图 片 。 比 如 第 1 章 的 例子 ， 在 最 小 的 屏幕 
E, 我 们 希望 显示 上 面 涂 了 果酱 和 奶油 的 松 饼 。 在 大 一 点 的 屏幕 上 , 我 们 希望 显示 更 大 一 点 的 图 
片 ,也许 是 一 张 摆 满 各 式 蛋 糕 的 桌子 的 照片 。 最后， 对 于 非常 大 的 屏幕 ， 我们 希望 用 户 看 到 一 张 
乡村 街道 旁 的 蛋糕 店 的 外 景 ， 门 外 有 客人 坐 在 那里 吃 和 蛋糕 、 喝 茶 ( 有 点 像 我 向 往 的 世外桃源 )。 
这 样 就 需要 有 三 张 图 片 ， 而 且 要 用 picture 元 素 : 
<picture> 
<source media=" (min-width: 30em)" srcset="cake-table.jpg"> 
<source media=" (min-width: 60em)" srcset="cake-shop.jpg"> 
<img src="scones.jpg" alt="One way or another, you WILL get 


cake."> 
</picture> 


首先 ， 要 知道 picture 元 素 只 是 一 个 容器 ， 为 我 们 给 其 中 的 img 元 素 指 定 图 片 提 供 便 利 。 假 
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如 你 想 为 图 片 添加 样式 ， 那 目标 应 该 是 它 内 部 的 那个 img。 
其 次 ， 这 里 的 srcset 属 性 的 用 途 跟前 面 例子 中 的 一 样 。 


再 次 ， 这 里 的 img 标 签 是 浏览 器 不 支持 picture 元 素 ， 或 者 支持 picture 但 没有 合适 媒体 定 
义 时 的 后 备 。 敬 告 各 位 ， 千 万 别 省 略 picture 中 的 img 标 签 ， 否 则 后 果 可 能 不 堪 设 想 。 


这 里 最 不 同 的 是 source 标 签 。 在 这 个 标签 里 ， 可 以 使 用 媒体 查询 表达 式 明确 告诉 浏览 器 在 
什么 条 件 下 使 用 什么 图 片 。 比 如 ,前 面 例子 中 的 第 一 个 source 标 签 跟 浏览 器 说 :“ 哎 ， 兄 弟 ， 如 
果 屏 幕 大 于 等 于 30em， 给 我 替换 成 cake-table.jpg， 多 谢 啊 !” 只 要 条 件 匹 配 ， 浏 览 器 一 准 儿 照办 。 


使 用 新 图 片 格式 


picture 还 支持 提供 可 替换 的 图 片 格式 。WebP 是 一 个 新 格式 〈 详 见 https://developers.google. 
com/speed/webp/ )， 但 支持 的 浏览 器 不 多 ( http://caniuse.com/ )。 对 于 支持 它 的 浏览 器 ， 我 们 可 以 
提供 该 格式 的 图 片 ， 再 为 不 支持 它 的 提供 更 常见 的 格式 : 
<picture> 
«source type-"image/webp" srcset="scones-baby-yeah.webp"> 


«img src-"scones-baby-yeah.jpg" alt-"Again, you WILL eat cake."-» 
«/picture» 


好 像 代 码 很 简单 ， 不 用 怎么 解释 。 这 里 没有 使 用 meaia 属 性 ， 而 使 用 了 type ( 第 4 章 还 会 更 
多 地 用 到 它 )。 type 属 性 通常 用 于 指定 视频 来 源 ( 关于 视频 来 源 , 可 以 参考 这 里 : https://html.spec. 
whatwg.org/multipage/embedded-content.html )， 但 我 们 在 这 里 可 以 用 它 把 WebP 指 定 为 优先 使 用 的 
图 片 格式 。 浏 览 器 如 果 能 显示 ， 就 显示 ， 如 果 不 能 ， 就 使 用 img 标 签 里 的 图 片 。 



















































































M 很 多 老 旧 的 浏览 器 永远 不 可 能 用 上 W3C 的 响应 式 图 片 。 除 非 真 的 不 需要 ， 
否则 建议 大 家 始终 使 用 内 置 的 后 备 机 制 ， 以 防 万 一 。 这 样 新 老 浏览 器 才能 各 得 
其 所 ， 用 户 也 各 得 其 乐 。 


3.5 小结 

这 一 章 讲 了 很 多 基础 知识 。 其 中 很 大 篇 幅 在 讨论 Flexbox 这 种 最 近 得 到 广泛 支持 的 新 布局 技 
术 。 之 后 我 们 又 讨论 了 如 何 根据 要 解决 的 问题 为 用 户 提 供 多 种 图 片 (或 图 片 版 本 )。 利 用 好 
srcset, 、sizes 和 picture， 始 终 为 用 户 提 供 符 合 他 们 需要 的 图 片 ， 无 论 现在 还 是 未 来 。 

到 现在 为 止 ， 我 们 一 直 在 讲 CSS 的 内 容 ， 以 及 它 未 来 的 可 能 性 。 但 只 有 在 讲 响 应 式 图 片 的 时 
候 才 看 到 了 一 些 现代 的 标记 。 这 是 个 问题 ， 下 一 章 来 解决 。 


下 一 章 全 部 围绕 HTML5 展 示 ， 包 括 HTML5 涉 及 什么 、 与 之 前 版 本 的 异同 等 。 最 主要 的 是 我 
们 可 使 用 HTML5 新 的 语义 标记 ， 写 出 更 清晰 、 更 易 懂 的 HTML 文 档 。 
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提醒 一 下 ， 如 果 你 想 找 HTML5 应 用 编程 接口 的 使 用 指南 ， 抱 菊 ， 本 章 不 是 你 的 菜 。 


本 章 将 会 融 大 家 学 习 一 下 HTML5 的 “词汇 表 ” 以 及 这 些 新 元 素 的 语义 。 换 名 话说 ， 也 就 是 
使 用 新 的 HTML5 元 素描 述 标记 中 内 容 的 方式 。 本 章 主要 内 容 不 是 响应 式 设计 。 不 过 , HTML 
是 所 有 网 站 和 Web 应 用 的 基础 。 打 好 这 个 基础 何 乐 而 不 为 呢 ? 


有 人 可 能 会 问 ， 什 么 是 HTML5 啊 ? HTML5 其 实 就 是 HTML 的 最 新 版 本 ， 而 HTML 是 构建 网 
页 的 标记 语言 。HTML 作 为 一 门 语言 在 不 断 进化 ， 上 一 个 版 本 是 HTML 4.01。 


要 了 解 HIML 的 发 展 历程 ， 推 荐 大 家 看 一 看 维基 百科 : http://en.wikipedia.org/wiki/HTMI# 


HTML versions timeline。 



























































y HTML5 是 W3C 的 建议 标准 ， 规 范 的 全 文 地 址 是 : http:/wwww3.org/ 
Q TR/html5/. 
本 章 内 容 : 


Q 浏览 器 对 HTML5 的 支持 情况 
口 正确 使 用 HTML5 

口 宽容 的 HTML5 

口 新 的 语义 元 素 

a 文本 级 语义 

口 作废 的 特性 
口 使 用 新 元 素 

OQ 兼容 WCAG (Web Content Accessibility Guidelines ) 和 无 障碍 Web 应 用 WAI-ARIA ( Web 
Accessibility Initiative-Accessible Rich Internet Applications ) 

Q HAHAE 

口 响应 式 视 频 与 内 舰 框架 

口 “离线 优先 ” 
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: HTML5 提 供 了 很 多 处 理 表 单 和 用 户 输入 的 元 素 。 这 些 新 元 素 免 除了 开发 者 
使 用 JavaScript 费 时 费力 的 工作 ， 比 如 表单 验证 。 说 到 表单 ， 我 们 会 在 第 9 章 具体 
讲解 。 


4.4 得 到 普遍 支持 的 HTML5 标记 


今天 ,我 所 看 到 的 大 多 数 网 站 ( 以 及 我 自己 写 的 网 站 ) 都 使 用 了 HTML5， 而 不 是 旧版 本 的 
HTML 4.01。 


所 有 现代 的 浏览 器 都 理解 HTML5 中 新 的 语义 元 素 〈 新 的 结构 化 元 素 、 视 频 和 音频 标签 )， 其 
至 老 版 本 的 下 〈IE9 以 下 版 本 ) 都 可 以 通过 引入 一 小 段 “ 肛 子 脚本 ”正确 浑 染 这 些 新 元 素 。 

















什么 是 “腻子 脚本 ”? 


腻子 脚本 这 个 叫 法 的 发 明 者 是 Remy Sharp， 是 想 用 腻子 可 以 填补 墙 上 的 坑 

洼 不 平 来 比喻 填补 老 版 本 浏览 器 的 功能 缺失 。 因 此 ，JavaScript 中 的 腻子 脚本 可 

、 ”以 让 老 旧 浏览 器 支持 新 特性 。 不 过 ,腻子 脚本 也 会 导致 网 站 腑 肿 。 因 此 ， 即 使 

你 可 以 使 用 15 个 腻子 脚本 ， 让 IE6 将 一 个 网 站 泻 染 出 和 其 他 浏览 器 完全 相同 的 效 
果 ， 我 们 并 不 建议 这 么 做 。 

如 果 你 想 使 用 HTML5 中 的 结构 化 元 素 ， 可 以 看 一 看 Remy Sharp 最 初 的 脚本 

( https://remysharp.com/2009/01/07/html5-enabling-script )， 或 者 定制 一 个 Modernizr 

( https://modernizr.com/ )。 如 果 你 对 Modernizr 并 不 熟悉 ， 下 一 章 有 一 节 专 门 介绍 


好 了 ， 了 解 这 些 之 后 ， 我 们 可 以 看 看 怎么 开始 写 HTMLS 网 页 了 。 先 来 看 开始 标签 吧 。 


4.2 ”开始 写 HTML5 网 页 


首先 看 HTMLS 文 档 的 开始 部 分 。 没 有 这 些 代 码 ， 网 页 会 出 现 问题 。 


<!DOCTYPE html» 
«html lang="en"> 
«head» 

«meta charset-utf-8» 


个 一 个 来 看 。 一 般 来 说 ， 每 个 网 页 都 会 用 到 这 些 元 素 ， 因 此 理解 它们 非常 必要 。 
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4.2.1 doctype 


qoctype 是 我 们 告诉 浏览 需 文 档 类 型 的 手段 。 如 果 没 有 这 一 行 ,浏览 顺 将 不 知道 如 何 处 理 后 
面 的 内 容 。 


HTML5 文 档 的 第 一 行 是 doctype 声 明 : 

















<!DOCTYPE html» 
如 果 你 喜欢 小 写 ,那么 < doctype html> 也 一 样 。 
相 比 HTML 4.01， 这 一 改变 很 受 欢 迎 。 回 顾 一 下 HTML 4.01 的 写法 吧 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmli-transitional.dtd"» 


真是 亚 梦 一 般 啊 ， 所 以 我 之 前 都 是 复制 粘贴 这 几 行 。 


HTMLsaoctypeA/NAÀ E, RA <!DOCTYPE html>。 据 我 了 解 ， 这 已 经 是 告诉 浏览 器 如 
何以 “标准 模式 ” 泻 染 网 页 的 最 短 方式 了 。 





























a 想 知道 “混杂 ”与 “标准 ”模式 的 区 别 ? 还 是 看 维基 百科 吧 : https://en. 


wikipedia.org/wiki/Quirks mode. 


4.2.2 HTML 标签 与 lang 属性 


doctype 声 明之 后 是 开发 的 ntml 标 签 ， 也 是 文档 的 根 标 签 。 同 时 ， 我 们 使 用 f 1ang 
定 了 文档 的 语言 。 然 后 是 head 标签 : 














b 
uE 


t45 








"Hi 
4 





«html lang="en"> 
<head> 


4.2.3 ”指定 替代 语言 

根据 W3C 的 规范 ( https:/www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes ), 
lang 属 性 指定 元 素 内 容 以 及 包含 文本 的 元 素 属性 使 用 的 主语 言 。 如 果 正 文 内 容 不 是 英文 的 ， 最 
好 指定 正确 的 语言 。 比 如 ， 如 果 是 日 语 ， 相 应 的 HTML 标 签 应 该 是 <html lang="ja">。 完 成 的 
语言 列表 在 这 里 : http://www.iana.org/assignments/language-subtag-registry » 


ny 

















4.2.4 字符 编码 


最 后 是 指定 字符 编码 。 因 为 这 是 一 个 空 元 素 〈 不 能 包含 任何 内 容 的 元 素 )， 所 以 不 需要 结 
标签 : 
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«meta charset-"utf-8"'» 


除非 确实 有 需要 , 否则 这 里 charset 属 性 的 值 一 般 都 是 utf-8。 更 多 信息 可 以 参考 这 个 链接 : 


https://www.w3.org/International/questions/qa-html-encoding-declarations#html5charset, 





4.3 ARI HTML5 


记得 上 学 的 时 候 ， 非 常 厉害 (实际 上 也 非常 好 ) 的 数学 老师 有 时 候 不 来 。 每 当 这 时 候 ， 大 家 
都 会 松 一 口气 ， 因 为 会 有 一 位 非常 和 访 可 亲 的 老师 来 代课 。 他 会 静 静 地 坐 着 ,让 我 们 自己 学 习 ， 
不 会 冲 我 们 发 火 ， 也 不 会 挖 苗 谁 。 他 在 我 们 解 题 的 时 候 不 会 要 求 大 家 安静 ， 也 不 会 在 乎 你 是 不 是 
按照 他 的 思路 解 题 。 他 只 关心 你 回答 的 是 否 正确 ， 以 及 是 否 可 以 清楚 地 解释 计算 过 程 。 如 果 
HTML5 是 一 位 数学 老师 ， 就 应 该 是 那 位 宽容 的 代课 老师 。 下 面 我 就 来 解释 一 下 这 个 怪异 的 类 比 。 


如 果 注 意 一 下 自己 写 代码 的 方式 ,你 会 发 现 自己 基本 上 会 使 用 小 写 , 而 且 会 把 属性 值 放 在 引 
号 里 ， 另 外 也 会 为 脚本 和 样式 声明 一 个 type。 比 如 ， 可 能 会 这 样 链接 样式 表 : 








































































































«link href-"CSS/main.css" rel-"stylesheet" type-"text/css" /> 


HTML5 不 要 求 这 么 精确 ， 只 要 这 样 写 就 行 : 





«link href=CSS/main.css rel=stylesheet > 

注意 到 了 吗 ” 没有 结束 的 反 斜 枉 ， 属 性 值 也 没 加 引号 ， 而 且 没 有 type 声 明 。 不 过 宽容 的 
HTML5 并 不 在 乎 这 些 ， 后 一 种 写法 跟前 一 种 写法 一 样 ， 完 全 没有 问题 。 

这 种 松散 的 语法 并 不 局 限于 链接 资源 ， 而 是 可 以 在 文档 中 任何 地 方 出 现 。 比 如 ,可 以 这 样 声 
明 一 个 aiv 元 素 : 





























«div id=wrapper> 


这 同样 是 有 效 的 HTML5 代 码 。 搬 入 图片 也 一 样 : 








«img SRC-frontCarousel.png aLt-frontCarousel» 


这 行 代码 照样 有 效 。 没 有 结束 标签 的 反 斜 枉 ， 没 有 引号 ， 大 小 写 混用 ， 都 没 问 题 。 就 算 省 略 
<head> 标 签 ， 页面 依然 有 效 。 要 是 XHTML 1.0 的 话 ， 会 怎么 样 呢 ? 




















想 要 一 个 HTML5 模 板 ? 推荐 HTML5 Boilerplate ( http://html5boilerplate. 

Rs com/ )， 这 个 模板 预 置 了 HTML5“ 最 佳 实践 ”， 包 括 基础 的 样式 、 腻 子 脚本 和 可 

选 的 工具 ,比如 Modernizr。 阅读 这 个 模板 的 代码 就 可 以 学 习 到 很 多 有 用 的 技巧 ， 
如 果 你 有 特殊 需要 ， 还 可 以 对 其 定制 。 强 烈 建议 选用 1 
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4.3.1 理性 编写 HTML5 


我 个 人 喜欢 使 用 XHTML 风格 的 语法 写 HTML5。 换 句 话 说， 标签 必须 关闭 ， 属 性 值 必须 加 引 
号 ， 而 且 大 小 写 也 必须 一 致 。 有 人 可 能 会 说 ， 不 遵守 这 些 写法 可 以 节省 很 多 输入 工作 量 ， 而 缺少 
的 内 容 可 以 由 工具 来 补充 〈 换 名 话说， 任何 不 需要 输入 的 字符 和 内 容 都 不 输入 )。 但 我 希望 自己 
的 标记 看 起 来 一 目 了 然 ， 所 以 我 也 建议 大 家 这 样 做 。 我 认为 清晰 胜 过 简洁 。 


在 编写 HTML5 文 档 时 ， 我 觉得 既 可 以 保持 清晰 明了 ， 同 时 也 能 享受 HTML5 带 来 的 高 效率 。 
举 个 例子 ， 比 如 一 个 CSS 链 接 ， 我 会 这 样 写 : 









































«link href="CSS/main.css" rel="stylesheet"/> 


这 里 没有 省 略 末尾 的 反 斜 枉 和 引号 ， 但 省 略 了 type 属 性 。 问 题 的 关键 在 于 你 自己 认为 合适 
就 行 了 。HTML5 不 会 对 你 发 火 ， 不 会 把 你 的 标记 拿 到 班 上 展示 ， 也 不 会 罚 你 站 ， 更 不 会 因为 标 
签 通 不 过 验证 就 给 你 扣 上 坏 学 生 的 帽子 。 只 要 你 写 出 自己 认为 合适 的 标记 就 行 。 


我 谁 也 不 骗 。 我 只 是 希望 你 能 给 属性 值 加 上 引号 ， 也 别 落 下 线束 标签 的 反 斜 枉 。 和 否则 ,我 可 
能 会 默默 地 指责 一 下 你 。 




































































无 论 HTML5 对 语法 要 求 多 宽松 ， 都 有 必要 检验 自己 的 标记 是 否 有 效 。 有 效 
的 标记 更 容易 理解 。W3C 推 出 验证 器 就 是 为 了 这 个 目的 :https://validator w3.org/。 


不 再 纠结 该 怎么 写 样式 标记 了 。 下 面 我 们 赶紧 看 看 HTML5 带 来 的 其 他 好 人 处 。 


4.3.2 ”向 <a> 标 签 致敬 


HTML5 的 一 大 好 处 就 是 可 以 把 多 个 元 素 放 到 一 个 <a> 标 签 里 ( 哇 ， 早 该 这 样 了 ， 对 不 ? X 
以 前 ， 如 果 想 让 标记 有 效 ， 必 须 每 个 元 素 分 别 包含 一 个 <a> 标 签 。 比 如 以 下 HTML 4.01 代 码 : 




















<h2><a href="index.html">The home page</a></h2> 

<p><a href="index.html">This paragraph also links to the home page</ 
a»«/p» 

«a href-"index.html"»«img src-"home-image.png" alt-"home-slice" /»«/a» 


在 HTML5 中 ， 可 以 省 去 所 有 内 部 的 <a> 标 签 ， 只 在 外 面 套 一 个 就 行 了 : 


«a href="index.html"> 
<h2>The home page</h2> 
<p>This paragraph also links to the home page</p> 
<img src="home-image.png" alt="home-slice" /> 
</a> 


唯一 的 限制 是 不 能 把 另 一 个 <a> 标 签 或 button 之 类 的 交互 性 元 素 放 到 同一 个 <a> 标 签 里 (也 
很 好 理解 )， 另 外 也 不 能 把 表单 放 到 <a> 标 签 里 〈 更 不 用 说 了 )。 
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4.4 HTML5 的 新 语义 元 素 
OS X 词 典 中 关于 “语义 ”的 定义 如 下 ; 
“含义 在 语言 或 逻辑 方面 的 分 支 ”。 
对 我 们 而 言 ， 语 义 就 是 赋予 标记 含义 。 为 什么 赋予 标记 含义 很 重要 ? 很 高 兴 你 这 么 问 。 


大 多 数 网 站 的 结构 都 很 相似 ， 包 含 页 头 、 页 脚 、 侧 边栏 、 导 航 条 ， 等 等 。 作 为 网 页 编写 者 ， 
我 们 会 给 相应 的 div 元 素 起 个 好 理解 的 名 字 ( 比如 class="Heagder" )。 可 是 ,单纯 从 代码 来 看 ， 
任何 用 户 代理 (浏览 器 、 屏 幕 阅读 带 、 搜 索引 擎 候 虫 ， 等 等 ) 都 不 能 确定 每 个 aiv 元 素 中 包含 的 
是 什么 内 容 。 用 户 辅 助 技术 也 无 法 区 分 不 同 的 div。HTML5 为 此 引入 了 新 的 语义 元 素 。 



























































/www.w3.org/TR/html5/semantics.htmlZsemantics ; 


| 要 了 解 HTMLS 的 所 有 元 素 ， 请 先 全 身 放 松 ， 然 后 在 浏览 器 中 打开 : 
https: 


我 们 不 会 介绍 所 有 新 元 素 ， 只 会 介绍 我 觉得 对 响应 式 设 计 最 有 用 的 那些 。 


4.4.1 <main> 元 素 


很 长 时 间 以 来 ，HIML5 都 没有 元 素 用 于 表示 页 面 的 主 内 容 区 。 在 页 面 的 主体 中 ， 主 内 容 区 
就 是 包含 主 内 容 的 区 块 。 


刚 开 始 ， 对 于 不 在 HTML5 元 素 中 的 内 容 是 否 算 主 内 容 还 有 争议。 好 在 后 来 规范 改 了 ， 现 在 
我 们 可 以 使 用 main 标 签 来 声明 主 内 容 区 。 


无 论 是 页 面 中 的 主要 内 容 , 还 是 Web 应 用 中 的 主要 部 分 , 都 应 该 放 到 main 元 素 中 。 以 下 规范 
中 的 内 容 特 别 有 用 : 


“文档 的 主 内 容 指 的 是 文档 中 特有 的 内 容 ， 寻 航 链 接 、 版 权 信 息 、 站 点 标志 、 广 告 
和 搜索 表单 等 多 个 文档 中 重复 出 现 的 内 容 不 算 主 内 容 ( 除非 网 页 HREINS 就 是 


另外 要 注意 ， 每 个 页 面 的 主 内 容 区 只 能 有 一 个 〈 两 个 主 内 容 就 没有 主 内 容 了 )， 而 且 不 能 作 
为 article、aside、header、footer、nav 或 header 等 其 他 HTML5 语 义 元 素 的 后 代 。 上 述 这 
些 元 素 倒是 可 以 放 到 main 元 素 中 。 
















































































grouping-content.html#the-main-element。 


| ŞS 关于 main 元 素 的 官方 解释 ,请 参考 这 个 链接 : https://www.w3.org/TR/html5/ 
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4.4.2 <section> 元 素 

section 元 素 用 于 定义 文档 或 应 用 中 一 个 通用 的 区 块 ,例如 , 可 以 用 section 包 装 联系 信息 、 
新 闻 源 ， 等 等 。 关键 是 要 知道 这 个 元 素 不 是 为 应 用 样式 而 存在 的 。 如 果 只 是 为 了 添加 样式 而 包装 
内 容 ， 还 是 像 以 前 一 样 使 用 aiv 吧 。 

在 开发 Web 应 用 时 ,我 一 般 会 用 section 包 装 可 见 组 件 。 这 样 可 以 清楚 地 知道 一 个 组 件 的 开 
始 和 结 

那 到 底 什 么 时 候 该 用 section 元 素 呢 ? 可 以 想 一 想 其 中 的 内 容 是 否 会 配 有 自然 标题 ( 如 hl )。 
如 果 没 有 ， 那 最 好 还 是 选 div。 



























































要 了 解 W3C HTML5 规 范 对 <section> 元 素 的 具体 规定 ， 请 参考 这 里 : 
一 https://www.w3.org/TR/htmlS/sections.htmlzthe-section-element. 


4.4.3 <nav> 元 素 


<nav> 元 素 用 于 包装 指向 其 他 页 面 或 同一 页 面 中 不 同 部 分 的 主导 航 链接 。 但 它 不 一 定 非 要 用 
在 页 脚 中 (虽然 用 在 页 脚 中 是 可 以 的 ); 页 脚 中 经 常会 包含 页 面 共用 的 导航 。 


如 果 你 通常 使 用 无 序列 表 (<ul>) 和 列表 标签 (<li>) 来 写 导航 ， 那 最 好 改 成 用 nav 购 套 
多 个 a 标签 。 









































要 了 解 W3C HTMLS 规 范 对 <nav> 元 素 的 具体 规定 ， 请 参考 这 里 : 
一 http://www.w3.org/TR/htmlS/sections.html#the-nav-element。 


4.4.4 <article> 元 素 


<article> 跟 <section> 元 素 一 样 容易 引起 误解 。 为 此 ， 我 不 止 一 遍 读 了 规范 原文 。 以 下 是 
我 对 规范 的 解读 。<article> 用 于 包含 一 个 独立 的 内 容 块 。 在 划分 页 面 结构 时 ， 问 一 问 自己 ， 想 
放 在 article 中 的 内 容 如 果 整 体 复 制 粘 贴 到 另 一 个 站 点 中 是 否 照 样 有 意义 ”或 者 这 样 想 ， 想 放 在 
article 中 的 内 容 是 不 是 包含 了 RSS 源 中 的 一 篇 文章 ? 明显 可 以 放 到 article 元 素 中 的 内 容 有 博 
客 正文 和 新 闻 报 道 。 对 于 和 肯 套 <article> 而 言 ， 内 部 的 <article> 应 该 与 外 部 <article> 相 关 。 








要 了 解 W3C HTML5 规 范 对 <article> 元 素 的 具体 规定 ， 请 参考 这 里 : 
— http;//www.w3.org/TR/html5/sections.html£the-article-element. 
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4.4.5 «aside»JL X 


<aside> 元 素 用 于 包含 与 其 旁边 内 容 不 相关 的 内 容 。 实 践 当 中 ,我 经 常用 它 包 装 侧 边 栏 (在 
内 容 适当 的 情况 下 )。 这 个 元 素 也 适合 包装 突出 引用 、 广 告 和 导航 元 素 。 基 本 上 任何 与 主 内 容 无 
直接 关系 的 ， 都 可 以 放 在 这 里 边 。 对 于 电子 商务 站 点 来 说 ,我 会 把 “购买 了 这 个 商品 的 用 户 还 购 
买 了 ”的 内 容 放 在 <aside> 里 面 。 
































要 了 解 W3C HTML5 规 范 对 <aside> 元 素 的 具体 规定 ， 请 参考 这 里 : 
一 http://www.w3.org/TR/html5/sections.html£the-aside-element. 


4.4.6 <figure> 和 <figcaption> 元 素 
与 <figure> 相 关 的 规范 原文 如 下 : 
“…… 因 此 可 用 于 包含 注解 、 图 示 、 照 片 、 代 码 ， 等 等 。” 
比如 ， 可 以 用 它 来 重 写 第 1 章 中 的 部 分 标记 如 下 : 








«figure class-"MoneyShot"'-» 

«img class-"MoneyShotImg" src-"img/scones.jpg" alt-"Incredible 
scones" /> 

«figcaption class-"ImageCaption"»Incredible scones, picture from 
Wikipedia«c/figcaption» 
«/figure» 


这 里 用 <figure> 元 素 包装 了 一 个 小 小 的 独立 区 块 。 在 它 里 面 ， 又 使 用 <figcaption> 提 供 
了 父 figure 元 素 的 标题 。 
如 果 图 片 或 代码 需要 一 个 小 标题 ， 那 么 这 个 元 素 非常 合适 ( 这 些 标题 放 在 主 文 本 中 不 太 适 


f )。 


figure 元 素 的 规范 请 参考 这 里 http://www.w3.org/TR/html5/grouping- 


content.html#the-figure-element, 
~> figcaption 元 素 的 规范 请 参考 这 里 : http://www.w3.org/TR/html5/grouping- 


content.html#the-figcaption-element。 


4.4.7 <detail> 和 和 <summary> 元 素 


你 是 不 是 常常 想 在 页 面 中 添加 一 个 “展开 ”/“ 收 起 ”部 件 ? 用 户 单 击 一 段 摘要 ， 就 会 打开 
相应 的 补充 内 容 面 板 。HTML5 为 此 提供 了 details 和 summary 元 素 。 看 下 面 的 标记 ( 可 以 打开 
本 章 示 例 代码 中 的 example3.html ): 
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«details» 
«summary»I ate 15 scones in one day«/summary» 
It would probably kill me if I did. What a 


«p»0f course I didn't 
scones!«/p» 























way to go. Mmmmmm, 
«/details» 
在 Chrome 浏 览 器 中 打开 ， 不 用 添加 任何 样式 ， 默 认 只 会 显示 摘要 文本 
eee j | [^] Details. eE SES x (CN Ben 
C |) file: /I/Users/benfrain/Documents/Storage/articles/rwd/.... wo Em f? Q il 三 





Pp Iate 15 scones in one day 








次 ,面板 收 起 。 如 果 和 希望 面板 默认 打开 ， 可 以 














了 单 击 








单 击 摘要 文本 ,就 会 打开 一 个 面板 。 昨 
s 元 素 添 加 open 属 性 : 





为 detail 
<details open> 
<summary>I ate 15 scones in one day</summary> 
It would probably kill me if I did. What a 


«p»0f course I didn't 

















way to go. Mmmmmm, scones!«/p» 
«/details» 

eoo |; Details and summary exar X EN Ben 

Œ 3 file:///Users/benfrain/Documents/Storage/articles/rwd/... vs B f? £& Q I8 = 





Y Iate 15 scones in one day 
Of course I didn't. It would probably kill me if I did. What a way to go. Mmmmmm, scones! 











添加 一 些 样 式 , 以 便 用 户 知道 可 以 点 击 打开 面板 。 在 这 个 例 
个 样式 , 可 以 使 用 针对 Webkit 


MN 


黑色 小 三 角 图 标 。 要 禁用 这 


DS 


支持 这 两 个 元 素 的 浏览 器 通常 会 
子 中 , Chrome( Safari 也 可 以 ) 会 添加 一 个 黑 


的 伪 选 择 符 : 
summary::-webkit-details-marker ( 
display: none; 





) 
当然 ， 使 用 同样 的 选择 符 也 可 以 添加 不 同 于 默认 的 样式 。 
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目前 还 不 能 为 展开 和 收 起 面板 添加 动画 。 同 样 ， 也 不 能 收 起 其 他 (已 经 打开 的 同 级 ) 面板 。 
我 不 太 清 楚 这 些 特性 将 来 是 否 可 以 ( 应 该 ) 得 到 支持 。 应 该 把 它 想象 成 以 前 使 用 JavaScript 切 换 
display :none 的 效果 。 

可 惜 在 写作 本 书 时 (2015 年 年 中 )，Firefox 和 IE 都 不 支持 上 述 行为 ， 只 会 泻 染 出 两 个 行内 元 


素来 。 有 相应 的 腻子 脚本 ( https://mathiasbynens.be/notes/html5-details-jquery )， 和 希望 将 来 这 两 个 
浏览 器 能 原生 支持 它们 。 




















4.4.8 <header> 元 素 


实践 中 ， 可 以 将 <header> 元 素 用 在 站 点 页 头 作 为 “报头 ”， 或 者 在 <article> 元 素 中 用 作 
某 个 区 块 的 引 介 区 。 它 可 以 在 一 个 页 面 中 出 现 多 次 〈 比如 页 面 中 每 个 <sectioin> 中 都 可 以 有 一 


个 -header> )。 


要 了 解 W3C HTML5 规 范 对 <header> 元 素 的 具体 规定 ， 请 参考 这 里 : 
http://www.w3.org/TR/html5/sections.html#the-header-element, 


4.4.9 «footer»7L X 


<footer> 元 素 应 该 用 于 在 相应 区 块 中 包含 与 区 块 相关 的 内 容 ， 可 以 包含 指向 其 他 文档 的 链 
Bi, 或 者 版 权 声 明 。 与 <header> 一 样 ，<footer> 同 样 可 以 在 页 面 中 出 现 多 次 。 比 如 ,可 以 用 它 
作为 博客 的 页 脚 ， 同 时 用 它 包 含 文章 正文 的 末尾 部 分 。 不 过 , 规范 里 说 了 ,作者 的 联系 信息 应 该 
放 在 <adqdqress> 元 素 中 。 














/Wwww.w3.org/TR/html3/sections.html#the-footer-element。 


| 要 了 解 W3C HTML5 规 范 对 <footer> 元 素 的 具体 规定 ， 请 参考 这 里 : 
S http: 


4.4.10 «address»7L X 


<address> 元 素 明 显 用 于 标记 联系 人 信息 ， 为 最 接近 的 <article> 或 <body> 所 用 。 不 过 有 
一 点 不 好 理解 ， 它 并 不 是 为 包含 邮政 地 址 准备 的 〈 除非 该 地 址 确实 是 相关 内 容 的 联系 地 址 )。 邮 
政 地 址 以 及 其 他 联系 信息 应 该 放 在 传统 的 <p> 标 签 里 。 


我 不 太 喜 欢 用 <adaress>, 因为 我 觉得 如 果 能 单独 使 用 它 来 标记 某 个 物理 地 址 会 更 有 用 , 但 
这 只 是 个 人 偏好 。 硕 望 你 能 觉得 它 有 用 。 
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要 了 解 W3C HTML5 规 范 对 元 素 的 具体 规定 ， 请 参考 这 里 : httpi//www.w3. 
— org/TR/html5/sections.htmlZthe-address-element ; 


4.4.11 hd 到 h6 
最 近 我 才 知 道 ， 原 来 规范 是 不 推荐 使 用 hn1 到 ne 来 标记 标题 和 副标题 的 。 我 说 的 是 比如 这 样 : 











«hl»Scones:«/h1-» 
«h2»The most resplendent of snacks«c/h2» 


HTML5 规 范 是 这 么 说 的 : 

“hn1 到 nh6 元 素 不 能 用 于 标记 副标题 、 字 幕 、 广 告 语 ， 除 非 想 把 它们 用 作 新 区 块 或 子 
区 块 的 标题 。” 
这 应 该 是 规范 中 少见 的 表述 清晰 的 句子 了 。 


那 我 们 怎么 估计 其 可 能 性 呢 ? 规范 本 身 有 一 整 节 在 讲 这 些 〈https:/www.w3.org/TR/html5/ 
common-idioms.html#common-idioms )。 我 个 人 更 喜欢 用 <hgroup> 元 素 ， 只 可 惜 它 已 经 风光 不 再 
了 (更 多 信息 ， 请 参考 4.6 节 )。 根 据 规范 的 建议 ， 前 面 的 代码 应 该 重 写成 这 样 : 



































«hi1»Scones:«/h1» 
<p>The most resplendent of snacks«/p» 


4.5 HTML5 文本 级 元 素 


除了 刚刚 介绍 的 结构 化 和 分 组 元 素 ，HTML5 还 修订 了 一 些 以 前 作为 行内 元 素 使 用 的 标签 。 
修订 之 后 ，HTML5 规 范 称 它们 为 “文本 级 语义 标签 ”( https://www.w3.org/TR/html5/text-level- 
semantics.html#text-level-semantics )。 下 面 来 看 几 个 常见 的 例子 。 











4.5.1 <b> 元素 

过 去 ， 人 们 常用 <b> 元 素来 加 粗 文 本 ( https:/www.w3.org/TR/html4/present/graphics.html# 
edef-B )。 追 溯 历 史 ， 这 种 用 法 起 源 于 让 标记 语言 承担 样式 功能 的 时 候 。 而 现在 ， 可 以 把 它 用 作 
一 个 添加 CSS 样 式 的 标记 ， 正 如 HTML5 规 范 所 说 : 

“<b> 元 素 表示 只 为 引 人 注 意 而 标记 的 文本 ， 不 传达 更 多 的 重要 性 信息 ， 也 不 用 于 

表达 其 他 的 愿望 或 情绪 。 比 如 ， 不 用 于 文章 摘要 中 的 关键 词 、 评 测 当 中 的 产品 名 、 交 互 

式 文本 程序 中 的 可 执行 命令 ， 等 等 。 

尽管 现在 的 <b> 元 素 并 无 特殊 含义 ， 但 既然 它 是 文本 级 的 ， 那 就 不 能 用 它 来 包围 一 大 段 其 他 
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标记 ， 这 时 候 应 该 用 aiv。 另 外 ， 由 于 过 去 人 们 常用 它 来 加 粗 文 本 ， 如 果 你 不 想 让 它 把 自己 的 内 
容 展 示 为 粗 体 ， 一 定 要 在 CSS 里 重 置 它 的 font-weight。 











4.5.2 ”<em> 元 素 

















没 错 , 我 一 般 用 <em> 就 只 是 为 了 给 文本 添加 样式 。 我 需要 调整 自己 的 用 法 , 因为 HTML5 说 : 
“em 元 素 表 示 内 容 中 需要 强调 的 部 分 。” 
因此 ， 除 非 你 想 强 调 内 容 ， 否 则 可 以 考虑 <b> 标 签 ， 或 者 在 合适 的 情况 下 ， 选 <i> 也 行 。 


4.5.3 ”<i> 元 素 


HTML5 规 范 里 这 么 描述 <i> 元 素 : 


“一 段 文本 ， 用 于 表示 另 一 种 愿望 或 情绪 ， 或 者 以 突出 不 同文 本 形式 的 方式 表达 偏 


离 正 文 的 意思 。” 











总 之 ， 它 不 仅仅 用 于 把 文本 标 为 斜体 。 比 如 ， 可 以 用 它 在 文本 中 标记 出 罕 用 的 名 字 : 





<p>However, discussion on the hgroup element is now frustraneous as 
it's now gone the way of the «i»Raphus cucullatus«/i».«/p» 


A HTML5 中 还 有 很 多 其 他 的 文本 级 元 素 ， 要 了 解 这 些 元 素 ， 请 参考 规范 中 相 
X 的 部 分 : https://www.w3.org/TR/html5/text-level-semantics.html#text-level- 


semantics 


4.6 作废 的 HTML 特性 


除了 脚本 链接 中 的 语言 特性 外 ， 还 有 一 些 之 前 常用 的 特性 现在 在 HIML5 中 已 经 作废 了 。 























HTMLS 宣 布 作废 的 特性 可 分 两 类 : 兼容 和 不 媳 

















ETT o A 


tH 








还 可 以 用 ， 但 在 验证 器 中 会 收 到 和 警 














告 。 现 实 当中 应 该 尽量 不 用 它们 , 但 用 它们 也 不 会 出 什么 问题 。 不 兼容 特性 可 能 在 某 些 浏览 器 中 
仍然 可 以 正确 演 染 ， 但 确实 非常 不 鼓励 你 用 ， 如 果 你 非 要 用 ， 可 能 会 有 问题 。 


说 到 作废 和 不 兼容 特性 ， 实 际 上 很 多 我 以 前 都 没 用 过 ( 有 些 甚 至 从 来 不 知道 )。 相 信 不 少 读 
者 跟 我 类 似 。 不 过 ， 要 是 你 真 的 很 好 奇 ， 可 以 看 看 这 个 完整 的 作废 且 不 兼容 特性 的 列表 : 
https://www.w3.org/TR/html5/obsolete.html, 主要 包括 : strike, center, font, acronym, frame 








和 frameset。 





























还 有 一 些 特性 在 最 初 的 HTMLS 草 案 中 存在 过 ， 但 现在 已 经 删 掉 了 。 比 如 hgroup， 最 初 想 用 
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它 作 为 标题 组 ， 可 以 把 主 标题 hn1 和 副标题 hn2 放 到 它 里 面 。 不 过 ， 现 在 再 讨论 hgroup 已 经 没什么 
意义 了 ， 因 为 它 已 经 作 古 (可 以 Google， 愿意 你 就 试 试 )。 


4.7 ”使 用 HTML5 元 素 


现在 该 实际 用 一 用 我 们 介绍 的 HTML5 元 素 了 。 以 第 1 章 的 例子 为 起 点 , 看 看 下 面 的 代码 哪些 
用 上 了 新 的 HTML5 元 素 ? 


<article> 
<header class="Header"> 
<a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png" 
alt="Scone O'Clock logo" /></a> 
«h1 class="Strap">Scones: the most resplendent of snacks</h1> 
«/header» 
«section class-"IntroWrapper"» 
«p class-"IntroText"»Occasionally maligned and misunderstood; the 
scone is a quintessentially British classic.«/p» 
«figure class-"MoneyShot'-» 
«img class-"MoneyShotImg" src-"img/scones.jpg" alt-"Incredible 
scones" /> 
«figcaption class-"ImageCaption"»Incredible scones, picture from 
Wikipedia«c/figcaption» 
</figure> 
</section> 
<p>Recipe and serving suggestions follow.</p> 
«section class-"Ingredients"- 
«h3 class-"SubHeader"»Ingredients«c/h3» 
«/section» 
«section class-"HowToMake"- 
«h3 class-"SubHeader"»Method«/h3» 
«/section» 
«footer» 
Made for the book, «a href-"http://rwd.education"»'Resonsive 
web design with HTML5 and CSS3'«/a» by «address»«a href-"http:// 
benfrain"»Ben Frainc/a»«/address» 
«/footer» 
«/article» 


凭 常识 选择 元 素 


这 里 删除 了 很 多 内 部 包含 的 内 容 , 因为 我 们 想 聚 焦 于 结构 。 相 信 你 也 觉得 从 标记 中 找 出 不 同 
的 区 块 并 不 难 。 不 过 ， 此 时 此 刻 我 还 是 想 提供 一 个 实用 的 建议 。 某 一 时 刻 选 错 了 标记 并 不 意味 着 
世界 末日 。 比 如 , 在 前 面 的 例子 中 是 用 <section> 还 是 <div> 并 没有 那么 重要 。 如 果 在 应 该 用 <i> 
的 地 方 用 了 <em> ， 我 也 不 觉得 有 什么 罪恶 感 。W3C 制 定 规范 的 人 不 会 追究 你 。 你 要 做 的 就 是 运 
用 一 点 点 常识 。 也 就 是 说 ,如 果 你 可 以 在 合适 的 地 方 使 用 <header> 和 <footer>, 那么 就 会 带 来 
无 障碍 方面 的 好 处 。 
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4.8 WCAG 和 WAI-ARIA 


早 在 本 书 第 一 版 写作 时 (2011 年 到 2012 年 ), W3CHLO Z8 XJ HF De C LEZRETS JCBSERSE I9 V4 
更 简单 o 

















4.8.1 WCAG 


WCAG 的 宗旨 是 : 





“提供 一 份 能 满足 个 人 、 组 织 和 政府 间 国 际 交 流 需 求 的 Web 内 容 无 障碍 的 标准 。” 


一 些 相 对 陈旧 的 网 页 ( 相对 于 单 页 Web 应 用 而 言 )， 有 必要 参考 WCAG 指 南 。 这 份 指南 提供 
了 很 多 (大 部 分 是 常识 性 的 有 关 让 网 页 无 障碍 访问 的 建议 。 每 个 建议 对 应 一 个 一 致 性 级 别 : A、 
AA 或 AAA。 关 于 一 致 性 级 别 的 具体 内 容 ， 可 以 参考 这 里 : https;//www.w3.org/TR/UNDER- 
STANDING-WCAG?20/conformance.html£uc-levels-head , 


看 了 以 后 , 你 可 能 会 发 现 自己 已 经 按照 其 中 很 多 建议 做 了 , 比如 为 图 片 提供 蔡 代 文本 。 可 是 ， 
我 还 是 建议 大 家 看 看 这 份 简明 指南 ( https:/www.w3.org/WAIWCAG20/glance/Overview.html ), £^ 
后 定制 一 份 属于 自己 的 参考 列表 ( https:/www.w3.org/ WAILWCAG20/quickref/ )。 


强烈 建议 每 一 位 读者 花 一 两 个 小 时 看 看 这 份 清单 。 其 中 很 多 建议 实际 做 起 来 非常 简单 , 但 对 
用 户 却 能 提供 很 大 的 便利 。 


















































4.8.2 WAI-ARIA 


WAI-ARIA 的 目标 是 总 体 上 解决 网 页 动态 内 容 的 无 障碍 问题 。 它 提供 了 用 于 描述 自 定义 部 件 
( Web 应 用 中 的 动态 部 分 ) 的 角色 、 状 态 和 属性 方法 ， 从 而 可 以 让 使 用 辅助 阅读 设备 的 用 户 识别 
并 利用 这 些 部 件 。 


举 个 例子 , 如果 屏 幕 上 有 一 个 部 件 显示 不 断 更 新 的 股票 价格 , 那 失 明 的 用 户 在 访问 这 个 页 面 
时 怎么 知道 那 是 股价 呢 ?WAI-ARIA 致 力 于 解决 这 些 问题 。 


不 要 对 语义 元 素 使 用 角色 
以 前 ， 给 页 头 或 页 脚 添 加 “地 标 ” 角 色 是 推荐 的 做 法 ， 比 如 : 


«header role-"banner"»A header with ARIA landmark banner rolec/header- 


可 是 现在 看 来 这 样 做 是 多 余 的 。 如 果 你 看 规范 ， 找 到 前 面 介绍 的 那些 元 素 ， 都 会 看 一 个 
Allowed ARIA role attribute 部 分 。 以 下 就 是 section 元 素 对 应 部 分 的 说 明 : 













































































“可 以 使 用 的 ARIA role 属 性 值 : 
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region( 默认 ,不 要 设置 alert, alertdialog application contentinfo., dialog, document, 


log、main、marquee、Ppresentation 、Search 或 status。” 
这 里 的 关键 是 “region ( 默认 , 不 要 设置 了 。 这 句 话 表明 给 这 个 元 素 添加 ARIA 角 色 没 有 意义 ， 
因为 元 素 本 身 已 经 暗含 了 相应 的 角色 。 规 范 中 的 一 个 说 明 让 我 们 更 容易 理解 这 一 点 : 
“多 数 情况 下 ,设置 与 ARIA 默 认 上 暗含 的 语义 匹配 的 ARIA 角 色 或 aria-* 属 性 是 不 必要 
的 ， 也 是 不 推荐 的 ， 因 为 浏览 器 已 经 设置 了 这 些 属性 。 








4.8.8 ”如 果 你 只 能 记 住 一 件 事 


方便 辅助 技术 的 最 简单 方式 就 是 尽 可 能 使 用 正确 的 元 素 。 比 如 heagder 元 素 远 比 div 
class="Header" 有 用 。 类 似 地 ， 如 果 页 面 中 有 一 个 按钮 , 使 用 button 元 素 ( 而 不 是 span 或 其 他 
用 样式 装扮 成 按钮 的 元 素 ), 我 承认 ,有 了 时候 并 不 能 随心 所 欲 地 给 button 设 置 样式 ( 比如 display : 
table-cellzkdisplay: flex), 但 这 时 候 至 少 应 该 选择 更 接近 的 方案 ， 比 如 <a> 标 签 。 


























4.8.4 ARIA 的 更 多 用 途 
ARIA 并 非 只 能 用 于 标记 “地 标 ”。 关 于 它 的 更 多 用 途 ， 可 以 看 这 份 关于 角色 及 其 适用 场景 的 


简洁 介绍 : http:/www.w3.org/TR/wai-aria/roles。 








另外 ， 我 想 推荐 大 家 看 一 看 Heydon Pickering 的 书 : Apps For All: Coding Accessible Web 
Applications ( 购买 地 址 : https://shop.smashingmagazine.com/products/apps-for-all )。 


使 用 NVDA 测 试 你 的 设计 


如 果 你 在 Windows 平 台 上 做 开发 ,可 能 希望 在 屏幕 阅读 器 上 测试 ARIA 特 性 。 
为 此 , 我 推荐 NVDA ( Non-Visual Desktop Access )， 它 免费 ， 地址 是 : http://www. 
nvaccess.org/o 
Q 谷歌 的 Chrome 浏 览 器 现在 也 提供 了 免费 的 “Accessibility Developer Tools" 
( 可 跨 平台 )， 非 常 值得 一 试 。 
还 有 越 来 越 多 的 工具 可 以 用 来 快速 测试 色盲 用 户 的 体验 等 。 比 如 ， 
https://michelf.ca/projects/sim-daltonism/ 就 是 一 个 Mac 应 用 ， 可 以 切换 色盲 的 类 
型 ， 让 你 在 浮动 的 调 色 板 中 看 到 预览 。 
最 后 ，OS X 也 包含 一 个 VoiceOver 实 用 工具 ， 可 用 于 测试 网 页 。 


希望 以 上 对 WALARIA 和 WCAG 的 简单 介绍 ， 可 以 让 你 稍微 想 一 想 怎么 通过 自己 的 设计 方便 
那些 使 用 辅助 技术 上 网 的 用 户 。 在 下 一 个 HTML5 项 目 里 增加 对 辅助 技术 的 支持 并 不 像 你 想 的 那 
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么 难 。 


最 后 再 向 大 家 推荐 一 个 关于 无 障碍 性 的 资源 ， 那 就 是 Al1Y 项 目 : http://allyproject.com/。 这 
个 网 站 上 有 很 多 链接 和 实用 的 建议 。 














4.9 在 HTML5 FEAA 


对 很 多 人 来 说 ， 是 苹果 拒绝 在 iOS 设 备 中 支持 Flash 才 让 HTML5 进 入 他 们 的 视野 。Flash 的 市 
场 份 额 曾 经 非常 之 高 (有 人 其 至 认为 它 阻碍 了 市 场 发 展 )， 主 要 用 于 在 网 页 中 播放 视频 。 然 而 ， 
苹果 并 没有 选择 使 用 Adobe 专 有 的 技术 ， 而 是 决定 使 用 HTML5 演 染 富 媒体 内 容 。 虽 然 HTML5 在 
富 媒体 方面 确实 有 了 长 足 进步 , 但 苹果 的 公开 支持 却 给 了 它 很 大 的 推动 , 使 其 媒体 工具 获得 了 社 
区 的 广泛 关注 。 

可 以 想见 ，IE8 及 更 低 版 本 的 IE 不 支持 HTML5 视 频 和 音频 。 多 数 其 他 现代 浏览 器 (Firefox 
3.5+、Chrome 4+、Safari 4, Opera 10.5、IE9+、iOS 3.2+, Opera Mobile 11+, Android 2.3+ ) 都 
能 正常 处 理 它们 。 

















4.9.1 使 用 HTML5 视频 和 音频 


在 HIML5 中 添加 视频 和 音频 很 简单 。 唯 一 麻烦 的 是 列 出 可 替代 的 媒体 资源 ( 因为 不 同 的 浏 
览 器 支持 的 媒体 格式 不 同 )。 目 前 ，MP4 已 经 是 可 以 跨 桌面 和 移动 平台 的 格式 ， 因 此 在 网 页 中 添 
加 HTML5 视 频 也 变 得 非常 简单 。 以 下 是 一 个 使 用 HTML5 链 接 到 视频 的 例子 : 


























«video src="myVideo.mp4"></video> 





在 HTML5 中 ， 只 要 一 对 <video></video> (或 <audio></audio> ) 标签 就 可 以 了 。 也 可 
以 在 这 对 标签 中 间 添 加 文本 ,以 便 出 问题 时 让 用 户 知道 这 里 是 什么 。 当 然 , 还 有 一 些 属性 是 通常 
都 需要 添加 的 ， 比 如 wiatn 和 height: 


























«video src="myVideo.mp4" width-"640" height="480">What, do you mean 
you don't understand HTML5?«/video» 


好 ， 如 果 把 前 面 的 代码 放 到 网 页 里 ， 用 Safari 打 开 ， 就 能 看 到 视频 ， 但 没有 播放 控件 。 要 使 
用 默认 的 播放 控件 ， 还 需要 添加 controls 属 性 。 也 可 以 添加 autoplay 属 性 (不 推荐 , 因为 大 家 
都 不 喜欢 默认 播放 视频 )。 请 看 下 面 修改 后 的 代码 : 


«video src-"myVideo.mp4" width-"640" height-"480" controls autoplay» 
What, do you mean you don't understand HTML5?«/video» 


添加 了 前 面 的 属性 后 ， 就 可 以 在 浏览 器 中 看 到 下 面 的 屏幕 截图 了 : 
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Our first responsive web page with HTML5 and CSS3 (amended with HTML5 elements) 十 
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其 他 属性 还 有 : preload 用 于 控制 媒体 的 预 加 载 ( 较 早 使 用 HTML5 的 读者 要 注意 用 preload 
替换 autobuffer )，1oop 用 于 重复 播放 ， 还 有 postez 用 于 设置 视频 的 首 屏 图 像 。 预 加 载 对 于 组 
存 视频 延迟 很 有 用 。 要 使 用 某 个 属性 ， 只 要 在 标签 中 添加 它 即 可 ， 比 如 : 

<video src="myVideo.mp4" width="640" height="480" controls autoplay 


preload-"auto" loop poster="myVideoPoster.png">What, do you mean you 
don't understand HTML5?«/video» 


旧版 本 浏览 器 的 后 备 


如 果 需 要 , 可 以 使 用 <source> 标 签 在 旧版 本 的 浏览 器 中 提供 后 备 资源 。 比如, 除了 提供 MP4 
版 本 的 视频 ， 如 果 想 让 IE8 及 更 低 版 本 的 正 也 能 看 到 视频 ， 可 以 添加 一 个 Flash 源 作为 后 备 。 更 进 
一 步 ， 如 果 用 户 浏 览 器 没有 任何 播放 条 件 ， 还 可 以 提供 一 个 下 载 视 频 的 链接 。 看 下 面 的 例子 : 






































«video width-"640" height-"480" controls preload-"auto" loop 
poster-"myVideoPoster.png"» 
«source src-"video/myVideo.mp4" type-"video/mp4"- 
«object width-"640" height-"480" type-"application/x-shockwaveflash" 
data-"myFlashVideo.SWF"- 
«param name-"movie" value-"myFlashVideo.swf" /» 
«param name="flashvars" value-"controlbar-over&amp;image-myVideo 
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Poster.jpg&amp;file-smyVideo.mp4" /> 
«img src-"myVideoPoster.png" width-"640" height-"480" alt-" . 
TETEE - ^U 
title-"No video playback capabilities, please download the 

video below" /> 

«/object» 

«p»«b»Download Video:«/b» 

MP4 Format: «a href-"myVideo.mp4"»"MP4"-c/a» 

«/p» 

«/video» 


这 段 代码 示例 和 示例 视频 文件 ( 视频 里 ,我 在 UK soap Coronation Street 现 身 ， 当 时 还 留 着 
头发 ， 注 视 着 《午夜 狂奔 》 的 主演 罗伯特 ' 德 尼 罗 ) 的 MP4 版 在 本 章 代 码 的 example2.html 中 可 
以 找到 。 


4.9.2 audio 与 video 几乎 一 样 


<audio> 标 签 与 <video> 标 签 的 属性 相同 ( 当然 不 包括 wiath、height 和 poster )。 它 们 的 
主要 区 别 ， 当 然 是 音频 没有 视频 需要 的 播放 区 域 。 


























4.10 响应 式 HTML5 视频 与 内 髓 框架 


我 们 已 经 看 到 了 ， 文 持 老 旧 版 本 浏览 器 会 导致 代码 腑 肿 。 本 来 就 一 两 行 的 viaeo 标 签 ， 为 了 
支持 旧版 本 的 IE 得 变 成 十 几 行 〈 外 加 一 个 Flash 文 件 )! 我 个 人 一 般 为 了 追求 文件 更 小 ， 不 会 添加 
Flash 后 备 ; 当然 ， 每 个 人 的 情况 不 同 。 


现在 , HTML5 视 频 的 唯一 问题 就 是 它 不 是 响应 式 的 。 没 错 , 这 是 一 个 在 讲 响应 式 Web 设 计 的 
书 里 出 现 的 一 个 不 “响应 ”的 例子 。 


不 过 , 对 于 HTML5 租 入 视频 , 要 让 它 变 成 响应 式 的 很 简单 。 只 要 把 高 度 和 宽度 属性 删 掉 ( 比 
如 ， 删 除 wiath="640" height="480" )， 并 添加 以 下 CSS : 












































video ( max-width: 100$; height: auto; ) 


KAE BER BEREORAK HUI AT 88 E BU HUP RISE, DIS BERE DP ORE ZR nn rc ACUSE C 比如 来 自 
YouTube 、Vimeo 和 其 他 来 源 的 视频 )。 以 下 代码 会 在 当前 页 面 添加 来 自 YouTube 的 《午夜 狂奔 》 
的 电影 预告 片 : 





«iframe width-z"960" height="720" src="https://www.youtube.com/ 
watch?v-B1 N28DA3gY" frameborder-"0" allowfullscreen»«/iframe» 


如 果 就 这 样 添加 到 页 面 中 ， 即 使 应 用 了 前 面 的 CSS， 当 视 口 小 于 960 像 素 时 ， 也 会 有 一 部 分 
影像 被 庶 住 。 
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解决 这 个 问题 的 最 简单 方式 ， 就 是 采用 法 国 CSS 大 师 Thierry Koblentz 的 技术 。 本 质 上 是 创建 
一 个 比例 相同 的 盒子 来 包含 视频 。 关 于 这 里 边 有 什么 “魔法 ”， 这 里 就 不 泄露 了 ,大 家 看 原文 吧 


http://alistapart.com/article/creating-intrinsic-ratios-for-video; 





这 样 的 在 线 服务 。 打 开 http://embedresponsively.com/， 把 内 舰 框架 的 URL 粘 贴 进去 。 然 后 你 会 得 
到 一 段 代码 ， 把 它 贴 到 自己 的 页 面 里 就 行 了 。 比 如 ， 我 们 《午夜 狂奔 》 的 电影 预告 片 会 得 到 以 下 
代码 : 




















<style>.embed-container { position: relative; padding-bottom: 56.25%; 

height: 0; overflow: hidden; max-width: 100%; height: auto; } .embedcontainer 
iframe, .embed-container object, .embed-container embed { 

position: absolute; top: 0; left: 0; width: 100%; height: 100$; }</ 
Style»«div class-'embed-container'»«iframe src-'http://www.youtube. 
com/embed/B1 N28DA3gY' frameborder-'0' allowfullscreen»«/iframe»«/div» 


这 就 是 所 有 代码 了 ， 把 它 粘贴 到 网 页 中 就 成 了 。 这 样 ， 就 有 了 一 个 响应 式 的 YouTube 视 频 。 
(《 听 着 孩子 ， 别 跟 罗 伯 特 ， 德 尼 罗 学 ， 吸 烟 不 好 ! ) 





4.441 关于 “离线 优先 ” 


我 认为 创建 响应 式 网 页 及 Web 应 用 的 理想 方式 是 “离线 优先 ”( offline-first )。 什 么 意思 呢 ? 
就 是 要 保证 网 站 和 应 用 始终 可 以 打开 ， 即 使 不 上 网 也 能 加 载 到 内 容 。 


HTMLS 离 线 Web 应 用 ( https://www.w3.org/TR/2011/WD-html5-20110525/offline.html ) 就 是 为 
了 这 个 目的 制定 的 。 


虽然 浏览 器 对 离线 Web 应 用 的 支持 不 错 ( http://caniuse.com/#feat=offline-apps )， 可 惜 这 个 方 
案 并 不 完美 。 它 设置 起 来 简单 , 可 是 也 有 不 少 局 限 和 缺点。 罗列 陈述 这 些 内 容 已 经 超出 本 书 范 畴 。 
不 过 ， 我 想 推荐 大 家 看 一 看 Jake Archibald 这 篇 幽默 又 全 面 的 文章 : http://alistapart.comvarticle/ 
application-cache-is-a-douchebag。 









































此 我 赞成 虽然 可 以 使 用 离线 Web 应 用 (有 一 个 不 错 的 教程 : http://diveintohtml5.info/ 
offline.html ) 和 LocalStorage( 或 它们 的 组 合 ) 实现 离线 优先 的 体验 , 但 其 实 我 们 刚刚 有 了 一 个 不 
错 的 方案 ， 那 就 是 Service Workers ( https://www.w3.org/TR/service-workers/ )。 


在 本 书写 作 时 ，Service Workers 还 是 一 个 比较 新 的 规范 。 建 议 大 家 看 看 这 个 只 有 15 分 钟 的 视 
频 简 介 ， 了 解 一 下 它 是 什么 : https://www.youtube.com/watch?v=4uQMI7mFB6g。 然 后 ， 表 看 一 看 
这 篇 入 门 文章 : http//www.html5rocks.com/en/tutorials/service-worker/introduction/, Hx/ri, FEA 
浏览 器 对 它 的 支持 情况 : https://jakearchibald.github.io/isserviceworkerready/。 












































412. ^2 81 





希望 在 我 写 这 本 书 第 三 版 的 时 候 , 可 以 针对 这 个 技术 写 一 个 全 面 的 介绍 和 实现 。 共 同期 盼 吧 ! 


4.12 小结 

这 一 章 的 内 容 可 不 少 。 从 基本 的 HTML5 网 页 结构 ， 到 般 入 富 媒 体 ( 视频 ) 并 确保 它们 适应 
视 口 变化 ， 可 谓 应 有 尽 有 。 

虽然 这 一 章 内 容 并 不 专门 针对 响应 式 设 计 , 但 我 们 了 解 了 如 何 编写 富有 语义 的 代码 , 知道 了 
怎么 让 网 页 对 那些 依赖 辅助 技术 的 用 户 同 样 有 用 。 

当然 , 这 一 童 的 代码 示例 也 很 多 。 以 下 儿童 将 拥抱 强大 的 CSS 及 其 灵活 性 。 首先 要 讲 一 讲 CSS 


3 级 和 4 级 的 选择 符 、 新 的 视 口 相关 的 CSS 单 位 ， 以 及 calc 和 HSL 颜 色 。 这 些 技术 可 以 让 我 们 更 高 
效 、 更 有 信心 地 创建 可 维护 的 响应 式 设计 。 
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过 去 几 年 , CSS 增 加 了 很 多 新 特性 , 有 的 用 于 实现 元 素 动 画 与 变形 , 有 的 用 于 实现 背景 图 片 、 
渐变 、 蒙 板 和 滤 镜 效果 ， 有 的 则 用 于 在 网 页 中 应 用 SVG。 


接 下 来 的 几 章 ,我 们 会 接触 所 有 这 些 新 特性 。 首 先 ， 我 想 最 好 从 最 基础 的 CSS 变 化 开始 : 选 
择 页 面 中 元 素 的 新 选择 符 、 用 于 改变 元 素 样式 和 大 小 的 单位 、 现 有 ( 以 及 将 来 ) 的 伪 类 和 伪 元 素 。 
男 外 ， 我 们 再 讨论 一 下 怎么 在 CSS 代 码 中 创建 分 支 ， 以 利用 不 同 浏览 带 支 持 的 不 同 特性 。 


本 章 内 容 : 


口 训 析 CSS 规 则 〈 规则 、 声 明 ， 以 及 属性 / 值 对 ) 

O 实现 啊 应 式 设 计 的 便捷 CSS 特 性 〈 多 列 、 断 字 、 截 取 / 略 文 、 区 域 滚 动 ) 

口 CSS 中 创建 分 支 的 特性 (让 有 的 规则 在 某 些 浏 览 器 中 生效 , 另 一 些 规则 在 其 他 浏览 器 中 生 
效 ) 

Q 使 用 子 字符 串 属 性 选择 符 来 选择 HTML 元 素 

O 什么 是 nth 选 择 符 ， 如 何 使 用 

口 什么 是 伪 类 和 伪 元 素 选 择 符 ( :empty, :before, :after, :target, :Scope ) 

O CSS Level 4 中 的 新 选择 符 ( :has ) 

口 什么 是 CSS 变 量 和 自 定义 属性 
口 如 何 使 用 CSS 的 calc 函 数 

口 利用 视 口 相关 的 单位 (vh、vw、vmin 和 vmax ) 
a 如 何 利 用 efont -face 优 化 网 页 布局 

口 带 alpha 透 明度 的 RGB 和 HSL 颜 色 模 式 


































































































5.1. GE A CET AH 


没 人 什么 都 知道 。 我 使 用 CSS 已 经 10 多 年 了 ， 每 周 都 会 发 现 新 的 CSS 特 性 〈 或 者 发 现 某 些 自 
己 以 前 知道 但 忘 了 的 东西 )。 为 此 ,我 认为 企图 知道 CSS 的 所 有 属性 和 值 的 可 能 组 合 是 不 现实 的 。 
相反 ， 与 其 如 此 ， 不 如 让 自己 知道 可 以 用 CSS 实 现 什么 更 好 。 
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本 章 只 关注 一 些 对 啊 应 式 设计 有 用 的 CSS 技 术 、 单 位 和 选择 符 。 和 希望 大 家 学 习 之 后 能 够 解决 
自己 做 响应 式 设 计时 可 能 遇 到 的 问题 。 





5.2 剖析 CSS 规则 


在 具体 探讨 CSS 新 特性 之 前 ， 为 避免 概念 不 清 ， 有 必要 先 明 确 一 下 CSS 规 则 的 构成 。 以 下 面 
的 代码 为 例 : 
.round ( /* 选择 符 */ 


border-radius: 10px; /* 声明 */ 
} 


这 条 规则 由 选择 符 ( .round ) 和 声明 (border-radius: 10px; ) 构成 。 声 明 又 由 属性 
(border-radius: ) 和 值 (10px; ) 构成 。 跟 你 心里 的 定义 一 样 ? 很 好 ， 咱 们 继续 。 








别 忘 了 检查 浏览 器 支持 情况 
4 


Q 随 着 接触 的 CSS3 新 特性 越 来 越 多 ， 如 果 想 知道 浏览 器 对 它们 的 支持 情况 ， 
可 以 访问 一 下 http://caniuse.com/。 除 了 显示 支持 的 浏览 器 版 本 ( 按 特 性 搜索 )， 
这 个 网 站 还 从 http://gs.statcounter.com/ 取 得 并 显示 最 近 的 全 球 使 用 情况 。 
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在 每 天 的 工作 中 ， 我 发 现 自己 经 常会 用 一 些 CSS3 特 性 。 把 这 些 特性 分 享 给 大 家 应 该 有 用 。 
这 些 特性 能 够 提高 工作 效率 , 特别 是 对 响应 式 设计 非常 有 帮助 , 而 且 可 以 相对 轻松 地 解决 以 往 令 
人 头疼 的 问题 。 























CSS 响应 式 多 列 布局 
有 没有 过 把 一 段 文本 分 成 多 列 显示 的 需求 ? 可 以 把 文本 分 别 放 在 不 同 的 元 素 中 , 然后 分 别 添 





























加 样式 。 可 是 ， 纯 粹 为 了 添加 样式 而 修改 标记 并 不 是 值得 提倡 的 。CSS 多 列 布局 规范 描述 了 如 何 
通过 多 列 显示 文本 。 比 如 以 下 标记 : 
<main> 
<p>lloremipsimLoremipsum dolor sit amet, consectetur 
«l-- 省 略 很 多 文本 --> 
</p> 





<p>lloremipsimLoremipsum dolor sit amet, consectetur 
<!-- 省 略 很 多 文本 --> 
</p> 
</main> 
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使 用 CSS 多 列 布局 可 以 通过 几 种 方式 让 文本 分 成 多 列 显 示 。 可 以 给 每 一 列 设 定 固定 的 列 宽 
( 比如 12em )， 也 可 以 指定 内 容 需 要 填充 的 列 数 ( 比如 3 )。 


下 面 就 用 代码 说 明 以 上 做 法 。 要 设 定 列 宽 ， 使 用 以 下 语法 : 














T 








main ( 


column-width: 12em; 


) 


以 上 代码 的 意思 就 是 内 容 要 填充 的 列 宽度 为 12em， 无 论 视 口 多 宽 。 改 变 视 口 宽 度 会 动态 改 
变 列 数 。 具 体 可 以 看 一 下 example 05-01 (或 者 访问 GitHub 仓 库 : https://github.com/benfrain/rwd )。 











下 面 是 页 面 在 让 ad 横向 〈 视 口 768 像 素 宽 ) 的 情况 下 的 效果 : 








iOS Simulator - iPad Air - iPad Air / iOS 8.1 (12B411) 


Carrier F 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt 
mollit anim id est laborum. Lorem 
ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore 
magna aliqua. Ut cnim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint 
Occaecat cupidatat non proident, sunt 
in culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor ncididunt ut labore et dolore 
magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat 
nulla pariatur.Lorem ipsum dolor sit 
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amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt 
mollit anim id est laborum. Lorem 
ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint 
occaccat cupidatat non proident, sunt 
in culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor ncididunt ut labore et dolore 
magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate 
velit csse cillum dolorc cu fugiat 
nulla pariatur.Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, sed 
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do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, 














sunt in culpa qui officia deserunt 
mollit anim id est laborum. Lorem 
ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip cx ca 
commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt 
in culpa qui officia descrunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor ncididunt ut labore et dolore 
magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat 
nulla pariatur. 




















以 下 是 桌面 Chrome 浏 览 器 ( 视 口 大 约 1100 像 素 ) 中 的 效果 : 
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Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis 





nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur. 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et 
dolore magna aliqua. Ut cnim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in 
reprehenderit in voluptate velit esse 


d exercitation ullamco laboris 


cillum dolore cu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
amet, consectetur 

ing elit, sed do eiusmod 
tempor ncididunt ut labore et dolore 
magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu 
fugiat nulla pariatur.Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore ct 
dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in 





reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in 
reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor ncididunt ut labore et dolore 





magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 


ullamco laboris nisi ut aliquip ex ea 


commodo consequat. Duis aute 
irure dolor in reprehenderit in 


voluptate velit esse cillum dolore eu 


fugiat nulla pariatur.Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in 


reprehenderit in voluptate velit esse 


cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 


tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in 
reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum 
dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor ncididunt ut labore et dolore 
magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ca 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. 





一 行 代码 就 可 以 轻松 实现 响应 式 多 列 ， 不 错 吧 ! 
1. 国定 列 数 ， 可 变 宽度 
如 果 想 让 列 数 固定 ， 宽 度 可 变 ， 可 以 这 样 写 规则 : 


main ( 


column-count: 





4; 


2. 添加 列 间 距 和 分 隔 线 





还 可 以 给 列 间 添加 间距 和 分 隔 线 : 


main ( 


column-gap: 
column-rule: 
column-width: 


结果 如 下 : 


2em; 


12em; 


thin dotted 4999; 
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Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed 


cnim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 


sint occaecat cupidatat non 


deserunt mollit anim id est 


do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut. 


voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur 


proident, sunt in culpa qui officia 


cu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non 
proident, sunt in culpa qui officia 
deserunt mollit anim id est. 
laborum. Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do eiusmod tempor ncididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 





laborum. Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt 
ut labore ct dolorc magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 





eu fugiat nulla pariatur.Lorem. 
ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore ct 
dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi 
ut aliquip ex ea commodo 
consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit 


essc cillum dolorc cu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id cst laborum. Lorem 
ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et 
dolorc magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris nisi 
ut aliquip ex ea commodo 
conscquat. Duis autc irurc dolor 
in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. Lorem 
ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod 
tempor ncididunt ut labore et 
dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud 


exercitation ullamco laboris nisi 
ut aliquip ex ea commodo 
consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit 
esse cillum dolorc cu fugiat nulla 
pariatur.Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt 
ut labore ct dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo conscquat. Duis autc 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non 
proident, sunt in culpa qui officia 
deserunt mollit anim id est 
laborum. Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 


nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate vclit essc cillum dolorc 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non 
proident, sunt in culpa qui officia 
descrunt mollit anim id cst 
laborum. Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do eiusmod tempor ncididunt 
ut laborc ct dolorc magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
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更 多 内 容 ， 建 议 大 家 去 看 CSS3 Multi-column Layout Module: https://www.w3.org/TR/css3- 
multicol/。 





目前 , 虽然 该 规范 已 经 成 为 候选 标准 , 但 很 可 能 还 需要 给 列 声明 添加 供应 商 前 缀 才能 保证 最 
大 兼容 性 。 


关于 CSS 多 列 布局 ， 我 觉得 唯一 一 点 需要 说 明 的 ， 就 是 如 果 每 一 列 文本 太 长 可 能 影响 用 户 体 
依 。 这 是 因为 用 户 需要 反复 上 下 滚动 页 面 ， 会 很 麻烦 。 





5.4 Wr 


有 多 少 回 需 要 把 很 长 的 URL 放 到 很 小 的 空间 里 , 然后 又 很 绝望 ? 看 看 下 面 的 屏幕 截图 ，URL 
已 经 跑 到 了 灰 底 区 域 的 外 面 。 

















使 用 一 个 CSS3 声 明 可 以 很 轻松 地 修复 它 ， 这 个 声明 凑巧 还 能 支持 IE5.5: 
word-wrap: break-word; 


把 它 应 用 给 包含 元 素 ， 会 得 到 如 下 图 所 示 的 效果 : 

















看 ， 长 URL 完 美 折 行 ! 


5.4.1 截 短 文本 
截 短 文本 以 前 一 直 是 服务 器 端 来 做 , 今天 , 只 用 CSS 照 样 可 以 实现 了 。 下 面 看 看 具体 怎么 做 。 
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比如 有 以 下 标记 (参见 example_05-03 ): 


«p class-"truncate"»OK, listen up, I've figured out the key eternal 
happiness. All you need to do is eat lots of scones.«/p» 


但 我 们 想 让 它 在 520 像 素 宽 的 容器 里 显示 成 这 样 : 








OK, listen up, I've figured out the key eternal happiness. All you need to do is ... 























以 下 是 实现 这 一 效果 的 CSS : 


.truncate { 
width: 520px; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: no-wrap; 


} 





q 关于 text-overflow 属 性 ， 可 以 和 参考 规范 原文 : http://dev.w3.org/csswg/ 


CSS-ui-3/, 





只 要 内 容 超 出 既定 宽度 ( 如 果 是 在 一 个 弹性 容器 里 ， 可 以 设置 为 100% )， 就 会 被 截 短 。 最 后 
的 white-space: nowrap 声 明 是 为 了 确保 长 出 来 的 文本 不 会 折 行 显示 在 外 部 元 素 中 。 











5.4.2 ”创建 水 平 滚动 面板 


相信 有 人 明白 这 个 标题 的 意思 。 所 谓 水 平 滚动 面板 ， 就 是 iTunes 商 店 和 Apple TV 中 显示 的 相 
关内 容 面 板 ( 电影、 专辑 呀 什么 的 )。 在 水 平 空间 允许 的 情况 下 ， 可 以 看 到 所 有 商品 。 而 在 空间 
受 限时 ( 比如 手机 上 )， 面 板 就 可 以 左右 滚动 。 


滚动 面板 在 安 卓 和 iOS 设 备 上 特别 合适 。 如 果 你 手边 有 一 台 iOS 或 安 结 设备 , 可 以 看 一 看 下 一 
个 例子 的 效果 : http://fwd.education/code/ch5/example 05-02/。 再 对 比 一 下 桌面 浏览 器 Safari 或 
Chrome 中 的 效果 。 


我 给 2014 年 最 卖座 的 电影 建立 了 滚动 面板 ， 在 iPhone 中 效果 如 下 : 
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iOS Simulator - iPhone 5 - iPhone 5 / iOS 8.1 (... 
Carrier 10:29 PM - 


file:///Users/benfrain/Documents/* C 


Top grossing films of 
2014 









3x Guardians 2, F A 
A ofthe 
Jd i Galaxy 


UAR. 
GALA; 














< H a egt 


其 实说 CSS3 并 不 完全 对 。 这 里 的 关键 技术 是 CSS2.1 中 的 white-space (https:Wwww.w3.org/ 
TR/CSS2/text.html )。 这 里 把 它 和 Flexbox 布 局 机 制 融 合 了 起 来 。 
































为 了 让 这 个 技术 起 作用 ， 只 需 用 一 个 比 所 有 内 容 加 起 来 都 窗 的 容器 ， 将 其 X 轴 的 overflow 
设置 为 auto。 这 样 ， 它 会 在 空间 足够 的 情况 下 不 提供 滚动 机 制 ， 而 在 空间 不 够 时 显示 滚动 条 。 


.Scroll Wrapper ( 
width: 100$; 
white-space: nowrap; 
overflow-x: auto; 
overflow-y: hidden; 


} 


.Item { 
display: inline-flex; 


} 




















这 里 的 white-space: nowrap 意 思 是 有 空白 的 时 候 不 折 行 。 为 了 把 所 有 内 容 都 保持 在 一 行 ， 
我 们 设置 了 所 有 子 元 素 为 行内 元 素 。 虽 然 使 用 的 是 inline-flex， 其 实 inline-block 或 
inline-table 都 可 以 。 





: :before 和 : :after 伪 元 素 


M 如 果 查 询 示例 代码 ， 你 会 发 现 ::before 伪 元 素 用 于 显示 项 目的 数量 。 如 果 
使 用 伪 元 素 ， 记 住 为 了 保证 ::before 和 ::after 显 示 ， 它 们 必须 包含 一 个 


content 值 ， 就 算 空白 也 行 。 显 示 之 后 ， 这 些 元 素 就 好 像 相 应 元 素 的 第 一 个 和 
最 后 一 个 子 元 素 一 样 。 


5.5 在 CSS 中 创建 分 支 89 














为 了 增添 点 艺术 情调 ,还 可 以 尽量 隐藏 滚动 条 。 可 惜 相应 属性 只 有 个 别 浏览 器 支持 ， 所 以 要 
手工 添加 前 级 ( Autoprefixer 不 会 添加 这 些 属性 ， 因 为 它们 是 专 有 的 )。 此 外 ， 这 里 还 可 以 针对 
WebKit 浏 览 器 (iOS 设备 ) 添加 一 些 触摸 样式 的 滚动 效果 。 好 ， 现 在 的 .Scrol1l_Wwrapper 就 变 
成 这 样 了 : 














.Scroll_Wrapper { 
width: 100%; 
white-space: nowrap; 
overflow-x: auto; 
overflow-y: hidden; 
/* 在 WebKiet 的 触摸 设备 上 出 现 */ 
-webkit-overflow-scrolling: touch; 
/* 在 支持 的 IE 中 删除 滚动 条 */ 
-ms-overflow-style: none; 


) 


/* 防止 WebKit 浏 览 器 中 出 现 滚动 条 */ 
.Scroll Wrapper::-webkit-scrollbar ( 
display: none; 


} 

空间 有 限时 ， 就 会 出 现 水 平 滚动 面板 。 和 否则 ， 内 容 适 应 。 am 

这 个 技术 还 是 有 点 问题 。 首 先 ， 在 本 书写 作 时 ，Firefox 没 有 相应 属性 隐藏 滚动 条 。 其 次 ， 老 
版 本 安 卓 设 备 不 支持 水 平 滚动 ( 真 的 )。 因 此 ， 我 建议 配合 特性 检测 来 使 用 这 个 技术 。 稍 后 再 介 
绍 具体 怎么 做 。 




















5.5 在 CSS 中 创建 分 支 


要 做 出 任何 地 方 、 任 何 设备 上 都 同样 出 色 的 响应 式 设计 , 经 常会 碰 到 某 些 设备 不 支持 什么 特 
性 或 技术 的 情况 。 此 时 ， 往 往 需要 在 CSS 中 创建 一 个 分 文 。 如 果 浏 览 器 文 持 某 特 性 ， 就 应 用 一 段 
代码 ; 如 果 不 支 持 , 则 应 用 另 一 段 代 码 。 如 果 是 在 JavaScript 中 , 这 种 情况 就 是 if/else 或 switch 
语句 的 用 武之 地 。 


在 CSS 中 创建 分 支 有 两 种 手段 。 一 是 完全 基于 CSS， 但 支持 的 浏览 器 却 不 多 ;” 二 是 借助 
JavaScript 库 ， 获 得 广泛 兼容 性 。 接 下 来 我 们 分 别 看 一 下 。 













































































5.5.1 特性 查询 


CSS 原生 的 分 文 语 法 就 是 特性 查询 ， 属 于 CSS Conditional Rules Module Level 3 
( http://www.w3.org/TR/css3-conditional/ )。 不 过 现在 ，IE11 及 之 前 的 版 本 和 Safari ( 包括 iOS 8.1 之 
前 的 iOS 设 备 ) 不 支持 这 个 特性 。 所 以 说 兼容 性 不 完美 。 
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特性 查询 与 媒体 查询 语法 类 似 ， 比 如 : 


Gsupports (flashing-sausages: lincolnshire) ( 
body ( 
sausage-sound: sizzling; 
sausage-color: slighty-burnt; 
background-color: brown; 
j 
} 


这 段 样式 只 有 浏览 器 支持 flashing-sausages 属 性 才 会 应 用 。 我 肯定 没有 浏览 器 打算 支持 
这 个 属性 ， 因 此 esupports 块 中 的 样式 不 会 被 应 用 。 


下 面 看 一 个 更 实际 的 例子 。 在 浏览 器 支持 的 情况 下 使 用 Flexbox， 在 不 支持 的 情况 下 回 退 到 
另 一 种 布局 方案 。 比 如 : 




















Gsupports (display: flex) ( 
.Item ( 
display: inline-flex; 
j 
} 


Gsupports not (display: flex) ( 
.Item ( 
display: inline-block; 
j 
} 


这 里 定义 了 一 块 代码 在 浏览 器 支持 某 特性 时 应 用 , 定义 了 另 一 块 代码 在 浏览 器 不 支持 该 特性 
时 应 用 。 这 样 写 的 前 提 是 浏览 器 支持 asupports， 可 如 果 不 支持 ， 这 两 块 代码 都 不 会 被 应 用 。 


如 果 你 涵盖 不 支持 asupports 的 设备 ， 最 好 首先 写 默 认 的 声明 ， 然 后 再 写 aesupports 声 明 。 
这 样 , 如 果 浏 览 器 支持 esupports, 其 中 的 规则 会 覆盖 默认 规则 ; 否则 , 其 中 的 规则 就 会 被 忽略 。 
因此 ， 前 面 的 例子 可 以 重 写 成 这 样 : 


.Item ( 
display: inline-block; 
} 

















@supports (display: flex) { 
.Item { 
display: inline-flex; 
} 


5.5.2 ”组 合 条 件 
也 可 以 组 合 条 件 。 假 设 我 们 只 想 在 浏览 絮 支 持 Flexbox 和 pointer: coarse (关于 指针 ， 可 


5.5 在 CSS 中 创建 分 支 91 





以 参考 第 2 章 ) 时 应 用 某 些 规则 ， 可 以 这 样 写 : 





@supports ((display: flex) and (pointer: coarse)) ( 
.Item ( 
display: inline-flex; 
} 
} 


这 里 用 的 是 and 关 键 字 。 支 持 的 关键 字 还 有 or。 假如 除了 前 面 两 个 条 件 满足 之 外 ， 如 果 浏 览 
需 支 持 3D 变 形 也 想 应 用 样式 ， 那 么 可 以 这 样 写 : 























Qsupports ((display: flex) and (pointer: coarse)) or (transform: 
translate3d(0, 0, 0)) ( 
.Item ( 
display: inline-flex; 
} 
} 


注意 前 面 的 例子 中 使 用 了 括号 把 儿 个 条 件 分 开 了 。 


可 惜 的 是 ， 并 非 所 有 浏览 器 都 支持 @supports， 那 怎么 办 呢 ?” 没 关系 ， 有 一 个 非常 棒 的 
JavaScript 工 具 可 以 解决 这 个 问题 。 








5.5.3 Modernizr 


在 esupports 得 到 广泛 支持 以 前 , 可 以 使 用 Modernizr 这 个 JavaScript 工 具 。 目前 , 它 是 在 CSS 
中 实现 分 支 的 最 可 靠 方 式 。 


在 需要 对 CSS 代 码 开 分 支 的 时 候 ， 我 一 般 会 采用 渐进 增强 的 手段 。 所 谓 渐进 增强 ， 就 是 从 最 
简单 的 可 用 代码 开始 ， 从 最 基本 的 功能 开始 ， 从 支持 能 力 最 低 的 设备 开始 ,逐步 增强 到 支持 能 
更 强 的 设备 。 


M 
| 第 10 章 有 关于 渐进 增强 的 更 多 讨论 。 


下 面 就 来 看 一 看 怎么 基于 Modernizr 以 渐进 增强 的 方式 实现 CSS 代 码 分 支 。 
使 用 Modernizr 检 测 特性 


如 果 你 做 过 Web 开 发 ， 很 可 能 听 说 过 Modernizr， 甚 至 可 能 用 过 它 。Modernizr 是 一 个 放 在 网 
页 中 用 于 检测 浏览 如 特性 的 JavaScript 库 。 使 用 Modernizr, 只 要 下 载 后 把 它 链 接 到 head 中 就 行 了 : 









































«script srcz"/js/libs/modernizr-2.8.3-custom.min.js"»«/script» 


这 样 ， 当 浏览 器 加 载 页面 后 ， 就 会 运行 Modernizr 内 置 的 所 有 测试 。 如 果 浏 览 器 通过 测试 ， 
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Modernizr 会 ( 为 我 们 ) 在 html 标 签 上 添加 一 个 类 。 
比如 ，Modernizr 在 检测 完 浏 览 器 特性 后 ， 可 能 会 给 html 标 签 添加 以 下 这 些 类 
«html class-"js no-touch cssanimations csstransforms csstransforms3d 
csstransitions svg inlinesvg" lang-"en"- 
这 些 类 只 反映 了 部 分 特性 ,包括 : 动画、 变形 、SVG、 行 内 SVG， 以 及 对 触摸 的 支持 。 有 了 


ALAS 


这 些 类 ，CSS 代 码 就 可 以 像 这 样 开 分 支 了 : 





.widget ( 
height: 1rem; 
} 


.touch .widget { 
height: 2rem; 





在 前 面 的 例子 中 ， 部 件 本 来 是 lrem 高 ， 但 如 果 html 标 签 上 有 ( Modernizr 添 加 的 ) touch 类 ， 
那么 它 就 会 变 成 2rem 高 。 


同样 的 逻辑 也 可 以 反 过 来 写 





.widget { 
height: 2rem; 





.no-touch .widget { 
height: lrem; 
} 


这 样 就 是 让 部 件 默认 为 2rem 高 ， 而 在 html 标 签 上 有 no-touch 类 时 变 成 lrem 高 。 





不 管 怎么 写 代 码 ,Modernizr 都 可 以 为 分 支 代码 提供 支持 。 这 样 , 如 果 你 想 使 用 ransform3a， 
同时 又 想 在 不 支持 的 浏览 器 中 提供 后 备 ， 那 用 Modernizr 就 会 非常 方便 。 





Modernizr 能 测试 大 多 数 特性 ， 但 不 是 全 部 特性 。 比 如，overflow- 
scrolling 就 很 难 准 确 测试 。 在 某 类 设备 不 能 完美 呈现 设计 时 ， 给 它们 换 一 种 
设计 会 更 好 。 比 如 ， 鉴 于 老 版 本 安 草 很 难 水 平 滚动 ， 可 以 使 用 no-svg 类 来 建立 

Q 分 支 (因为 Android 2~2.3 都 不 支持 SVG )。 
或 许 你 想 创 建 自 己 的 测试 ， 虽 然 这 个 话题 超出 了 本 书 范围 ， 但 我 还 是 想 推 
荐 一 篇 文章 : http://benfrain.com/combining-modernizr-tests-create-customconve- 


nience-forks/。 
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5.6 新 CSS3 选择 符 


CSS3 提 供 了 很 多 新 的 选择 符 。 虽 然 新 选择 符 听 起 来 好 像 没 那 么 炊 眼 ， 但 它们 确实 能 够 提高 
写 码 的 效率 ， 让 你 爱 上 CSS3。 下 面 就 来 介绍 它们 。 








5.6.1 CSS3 属性 选择 符 
可 能 有 人 使 用 过 属性 选择 符 ， 比 如 以 下 规则 : 


img[alt] { 
border: 3px dashed #e15f5f; 
} 


其 中 的 选择 符 选 择 任何 包含 alt 属 性 的 元 素 。 好 ， 如 果 想 选择 包含 aata-sausage 属 性 的 元 
素 ， 就 可 以 这 样 写 : 
[data-sausage] ( 


/* 样式 */ 
} 


没 错 ， 只 要 在 方 括号 中 给 出 属性 名 就 行 。 





























> data-* 属 性 是 HTML5 引 入 的 一 个 用 于 保存 数据 的 属性 ,相关 的 规范 参见 这 
里 : http://www.w3.org/TR/2010/WD-html5-20101019/elements.html。 








如 果 同 时 指定 属性 的 值 ， 还 可 以 进一步 缩小 搜索 范围 。 比 如 ， 以 下 规则 : 
img[alt="sausages"] ( 

/* RA */ 
} 


只 会 选择 alt 属 性 值 为 sausages 的 元 素 ， 比 如 : 








«img class-"oscarMain" src="img/sausages.png" alt-"sausages" /> 


不 过 ， 以 上 选择 符 在 CSS2 里 就 可 以 用 了 。CSS3 又 给 属性 选择 符 增 加 了 什么 新 特性 呢 ? 








5.6.2 CSS3 子 字符 串 匹 配属 性 选择 符 


CSS3 支 持 依 据 属性 选择 符 包 含 的 子 字 符 串 来 选择 元 素 。 听 起 来 不 太 直 观 , 但 实际 上 并 不 难 。 
根据 子 字 符 串 匹配 元 素 分 三 种 情况 : 

















a eee 开头 
口 包含 LoT. 
O e 结尾 
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下 面 分 别 看 一 看 。 





看 下 面 的 标记 : 





«img src-"img/ace-film.jpg" alt="film-ace"> 
«img src-"img/rubbish-film.jpg" alt-"film-rubbish"- 


可 以 使 用 “以 …… 开 头 ”选择 符 来 选择 这 两 个 图 片 : 
img[alt^="film"] ( 


/* 样式 */ 
} 








这 里 关键 是 ^ 符 号 ,， 它 表示 “以 …… 开 头 ”。 因 为 这 两 个 图 片 的 alt 属 性 都 以 film 开 头 ， 所 以 
这 个 选择 符 匹 配 它们 俩 。 














2. 包含 iiai 
“包含 ……” 的 属性 选择 符 是 这 样 的 : 
[attribute*-"value"] ( 

/* 样式 */ 


} 





与 前 面 一 样 , 可 以 将 它 和 标签 类 型 联 用 ,不 过 我 是 只 会 在 必要 时 才 那 么 做 C 比如 要 修改 使 用 
元 素 类 型 )。 


看 下 面 的 标记 : 


<p data-ingredients="scones cream jam">Will I get selected?</p> 
We can select that element like this: 
[data-ingredients*="cream"] { 

color: red; 


} 


这 里 面 关键 是 * 符 号 ， 它 的 意思 是 “包含 ……” 














“以 …… 开 头 ” 选 择 符 显示 不 行 ， 因 为 属性 值 并 不 是 以 cream 开 头 。 但 “包含 ……” 是 惠 
以 的 。 





3. 以 soa wa 结尾 


“以 …… 结 尾 ”选择 符 的 语法 如 下 : 


[attribute$-"value"] ( 
/* 样式 */ 
} 
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看 个 例子 更 便于 理解 : 


«p data-ingredients-"scones cream jam"»Will I get selected?</p> 
«p data-ingredients-"toast jam butter"»Will I get selected?«/p» 
«p data-ingredients-"jam toast butter"»Will I get selected?«/p» 


假设 我 们 只 想 选 择 包含 data-ingredients 属 性 中 同时 包含 scrones 、cream 和 jam 的 元 素 
(第 一 个 元 素 )。 这 时 候 可 以 使 用 “以 …… 结尾 ”选择 符 : 








[data-ingredients$-"jam"] ( 
color: red; 


} 
这 里 关键 是 $ 符 号 ， 意 思 是 “以 …… 结 尾 ”。 



































5.6.3 ”属性 选择 符 的 注意 事项 
对 属性 选择 符 而 言 ， 属 性 被 当成 一 个 字符 串 。 比 如 以 下 CSS 规 则 : 


[data-film^="film"] ( 
color: red; 


) 
并 不 会 选择 以 下 元 素 : 


«span data-film-"awful moulin-rouge film">Moulin Rouge is dreadful«/ 
span> 


这 是 因为 aata-film 属 性 并 不 以 film 开 头 ， 而 是 以 awful 开 头 。 


除了 前 面 介 绍 的 三 种 属性 选择 符 , 还 可 以 使 用 “空格 分 隔 的 ”属性 选择 符 ( 注意 ~ 符号 ) IE7 
都 支持 : 


[data-film--"film"] ( 
color: red; 


) 
当然 也 可 以 选择 整个 属性 : 





























T 


[data-film-"awful moulin-rouge film"] ( 
color: red; 


) 
或 者 ， 如 果 你 只 想 以 某 两 个 (或 任意 多 个 ) 子 字 符 串 是 否 存在 为 依据 ， 也 可 以 这 样 写 : 


[data-film*-"awful"][data-film*-"moulin-rouge"] ( 
color: red; 


) 
没有 哪 种 方法 是 唯一 正确 的 。 实 践 中 可 以 根据 属性 值 的 复杂 程度 作出 选择 。 
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5.6.4 ”属性 选择 符 选择 以 数值 开头 的 ID 和 类 

















在 HTMLS 之 前 ， 以 数值 开头 的 ID 和 类 是 无 效 的 。HTML5 放 开 了 这 个 限制 。 说 到 ID ， 不 能 忘 


了 ID 不 能 包含 空格 ， 而 且 必 须 在 页 面 中 唯一 。 
http://www.w3.org/html/wg/drafts/html/master/dom.html。 





( http://www.w3.0org/TR/CSS21/syndata.html )。 


然而 ， 使 用 属性 选择 符 却 可 以 绕 过 CSS 的 限制 。 比 如 











5.7 CSS3 结构 化 伪 类 


CSS3 为 我 们 提供 了 更 多 基于 元 素 之 间 的 位 置 关 系 选择 





更 多 信息 可 以 参考 这 个 链接 : 


虽然 HIMLS 人 允许 ID 和 类 以 数值 开头 ， 但 CSS 还 不 允许 使 用 以 数值 开头 的 选择 符 


: [id="10"]。 


它们 的 选择 符 。 





下 面 看 一 个 常见 的 设计 场景 , 假设 有 一 个 针对 较 大 视 
之 外 的 其 他 项 显示 在 左 侧 。 


口 的 导航 条 , 我 们 想 让 其 中 除 最 后 一 项 


过 去 ， 要 解决 这 个 问题 ， 需 要 给 最 后 一 个 链接 额外 添加 一 个 类 ， 以 便于 选择 ， 比 如 : 


«nav class-"nav-Wrapper"'-» 
«a href-"/home" class-"nav-Link"-»Homec/a» 
«a href-"/About" class-"nav-Link"»About«/a» 
«a href-"/Films" class-"nav-Link"»Films«c/a-» 
«a href-"/Forum" class-"nav-Link"»Forum«/a» 





«a href-"/Contact-Us" class-"nav-Link nav-LinkLast"»Contact Us«/a» 


«/nav» 


这 样 做 本 身 就 有 问题 。 比 如 , 在 某 些 内 容 管理 系统 中 








， 给 最 后 一 个 链接 添加 额外 的 类 并 不 容 





易 。 好 在 ， 这 个 问题 放 在 今天 已 经 不 是 问题 了 。 利 用 CSS3 提 供 的 结构 化 伪 类 ， 可 以 轻松 处 理 类 





似 问 题 。 


5.7.1 :last-child 
CSS2.1 中 就 有 一 个 用 于 匹配 列表 中 第 一 项 的 选择 符 : 
div:first-child ( 
/* 样式 */ 
} 
CSS3 又 增加 了 一 个 可 以 选择 最 后 一 项 的 选择 符 : 
div:last-child ( 


/* RA */ 
} 





5.7 CSS3 结构 化 伪 类 97 





看 一 下 怎么 用 这 个 新 选择 符 解决 前 面 提 到 的 问题 : 


@media (min-width: 60rem) { 
.nav-Wrapper { 
display: flex; 
} 
.nav-Link:last-child ( 
margin-left: auto; 
) 
} 


还 有 专门 针对 只 有 一 项 的 选择 符 :only-child 和 唯一 一 个 当前 标签 的 选择 符 :only-of- 
typeo 














5.7.2 nth-child 























使 用 nth-chila 选 择 符 可 以 解决 更 麻烦 的 问题 。 还 是 与 前 面 一 样 的 标记 , 下 面 看 看 怎么 使 用 
nth-child 来 选择 任意 链接 。 

首先 ， 如 果 想 隔 一 个 选 一 个 怎么 办 ? 可 以 这 样 选 择 奇数 个 

.nav-Link:nth-child(odd) { 


/* 样式 */ 
} 


或 者 像 这 样 选择 侦 数 个 : 
.nav-Link:nth-child(even) { 


/* 样式 */ 
j 





5.7.3 理解 nth 





经 验 少 的 读者 可 能 会 觉得 ntph 很 吓人。 可 是 ， 只 要 掌握 了 它 的 逻辑 和 语法 ， 就 会 发 现 它 能 让 
你 做 的 事 非 常 棒 。 


CSS3 提 供 了 以 下 几 个 基于 nth 的 规则 : 


口 nth-child (n) 
口 nth-last-child (n) 
口 nth-of-type (n) 








L] nth-last-of-type (n) 





前 面 已 经 展示 了 可 以 在 nth-child 后 面 使 用 (oda) 和 (even) 分 别 选 择 奇数 和 偶数 个 元 素 。 
除 此 之 外 ， 参 数 nm) 还 有 另外 两 种 写法 。 
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口传 人 整数 。 比 如 nth-chilq (2) 会 选择 第 二 项 。 
O 传人 数值 表达 式 。 例 如 nth-chila (2) 会 从 第 一 项 开始 ， 然 后 每 三 个 选 一 个 。 


整数 n 很 好 理解 ， 只 要 传人 想 要 选择 的 元 素 的 序号 就 行 了 。 


n 作 为 数值 表达 式 对 于 普通 人 特别 是 数学 不 好 的 人 来 说 就 没 那 么 好 理解 了 。 如 果 你 数学 很 好 ， 
下 一 节 其 实 不 用 看 ; 和 否则， 下 一 节 就 是 给 你 准备 的 了 。 


一 点 数学 


假设 页 面 中 有 10 个 span ( 参考 example 05-05 ): 



































<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 


它们 默认 的 样式 如 下 : 


span { 
height: 2rem; 
width: 2rem; 
background-color: blue; 
display: inline-block; 




















错 ， 结 果 就 是 10 个 方块 排 成 一 行 : 


下 面 看 看 怎么 通过 基于 nth 的 选择 符 选择 不 同 的 方块 。 


我 们 只 看 括号 里 的 表达 式 ， 从 右边 开始 。 好 ， 假 设 要 知道 (2n+3 ) 会 选择 什么 ,我们 先 看 括 
号 里 最 右边 的 数 ( 这 里 的 3 表示 从 左 数 第 三 个 )， 然 后 就 知道 是 以 它 为 起 点 每 几 个 选 一 个 。 因 此 ， 
添加 以 下 规则 : 

span:nth-child(2n+3) { 

color: #f90; 


border-radius: 50%; 


) 
在 浏览 需 中 会 得 到 如 下 结果 : 
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显然 ， 这 个 nth 选 择 符 从 第 三 项 开始 ， 每 两 项 选择 一 项 ( 如 果 有 100 个 方块 ， 还 会 继续 向 右 
选 下 去 )。 


如 果 想 选择 从 第 三 项 开始 往 后 的 所 有 方块 呢 ?” 可 以 写 为 :nth-chilgd (1n+2)。 不过， 因为 n 
的 默认 值 就 是 1， 所 以 其 实 可 以 写成 :nth-child (n+2)。 同 样 ， 如 果 想 每 3 个 选 1 个 ， 也 不 用 写 
成 :nth-childa(3n+3) ， 而 是 可 以 直接 写成 :nth-childa(3n)。 这 是 因为 每 3 个 就 意味 着 从 第 3 
个 开始 , 不 用 再 明确 写 出 来 了 。 表 达 式 中 也 可 以 出 现 负 值 ， 比 如 :nth-child(3n-2) ， 表 示 从 第 
-2 个 元 素 开始 ， 每 3 个 选 1 个 。 


除了 指定 起 点 , 也 可 以 更 改 方向 。 默 认 情 况 下 , 在 找到 起 点 元 素 之 后 ,后续 的 选择 会 沿 DOM 
向 下 (对 我 们 例子 中 的 方块 而 言 ， 就 是 从 左 到 右 )。 如 果 想 反 转 方向 呢 ? 添 个 减 号 就 行 了 ， 比 如 : 
span:nth-child(-2n+3) ( 
background-color: #f90; 


border-radius: 50%; 


} 


这 样 也 是 先 找 到 第 三 项 ， 但 之 后 就 会 沿 着 与 默认 方向 相反 的 方向 (DOM 向 上 ， 即 我 们 例子 
中 从 右 向 左 ) 每 2 个 选 1 个 。 结 果 如 下 : 


讲 到 这 ， 你 对 基于 nth 的 选择 符 终于 有 些 明 白 了 ， 对 吧 ? 


接 下 来 ，nth-chilg 和 nth-last-child 的 区 别 在 于 ，nth-last-child 是 从 DOM 的 另外 
一 头 开始 。 比 如 :nth-last-child(-n+3)，, 就 是 从 倒数 第 三 个 开始 向 后 选择 所 有 项 。 在 浏览 
中 的 结果 如 下 : 


最 后 ， 再 看 看 :nth-of-type 和 :nth-last-of-type。 前 面 的 例子 只 考虑 了 子 元 素 ， 并 没 
有 区 分 标记 类 型 ( nth-child 选 择 符 选择 的 是 同 级 DOM 中 的 子 元 素 ， 与 类 无 关 )， 
而 :nth-of-type 和 :nth-last-of-type 就 要 区 分 类 型 了 。 拿 下 面 的 标记 为 例 ( 参考 example_ 
05-06 ): 
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<span class-"span-class"»«/span» 
<span class-"span-class"»«/span» 
<span class-"span-class"»«/span» 
«span class-"span-class"»«/span» 
<span class-"span-class"»«/span» 
«div class-"span-class"»«/div» 
«div class-"span-class"»«/div» 
«div class-"span-class"»«/div» 
«div class-"span-class"»«/div» 
«div class-"span-class"»«/div» 


如 果 我 们 使 用 下 面 的 选择 符 : 


.Span-class:nth-of-type(-2n«3) ( 
background-color: #f90; 
border-radius: 50%; 


} 


那么 虽然 所 有 元 素 都 有 相同 的 类 span-class, 但 这 里 只 会 选择 带 有 该 类 的 span 元 素 ( 因为 
一 个 选中 的 元 素 的 类 型 是 span )。 结 果 如 下 : 


稍 后 介绍 的 CSS4 选 择 符 会 解决 CSS3 选 择 符 的 计数 问题 。 


i 


d 












































CSS3 的 计数 规则 与 JavaScript 和 jQuery 不 同 


JavaScript 和 jQuery 都 是 从 0 开始 计数 的 。 换 名 话说 ， 
1 实际 上 代表 第 二 个 元 素 。 但 CSS3 则 从 1 开始 计数 ， 因 此 1 就 是 第 一 


5.7.4 基于 ntn 的 选择 与 响应 式 设计 


这 一 节 我 们 会 展示 一 个 真实 的 应 用 场景 ,看 一 看 如 何在 响应 式 设计 中 运用 基于 nth 的 选择 符 
解决 问题 。 


还 记得 example_05-02 中 的 水 平 滚动 面板 吗 ? 目前 要 考虑 的 场景 是 不 能 水 平 滚动 ， 因 此 我 们 
要 使 用 同样 的 标记 ， 把 2014 年 最 卖座 的 10 部 电影 显示 在 网 格 中 。 在 小 视 口中 ， 网 格 只 有 两 项 宽 ; 
在 大 一 点 的 视 口 中 是 三 项 宽 ， 再 大 一 点 就 是 四 项 宽 。 问 题 来 了 : 无 论 视 口 多 大 ,我 们 都 希望 最 底 
部 那 一 行 不 显示 底部 边框 (参考 example 05-09 )。 


以 下 是 四 项 宽 时 的 效果 : 
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看 到 最 后 两 项 底部 讨厌 的 边框 了 吗 ? 我 们 的 问题 就 是 怎么 去 掉 它 。 不 过 ， 方 案 要 足够 灵活 ， 
这 样 即使 最 后 一 行 又 多 出 一 项 , 那 一 项 的 底部 边框 也 照样 能 被 去 掉 。 由 于 不 同 视 口中 每 一 行 的 项 
数 不 同 , 必须 针对 视 口 改变 基于 nth 的 选择 符 。 为 简单 起 见 , 这 里 只 给 大 家 展示 匹配 每 行 四 项 (大 
视 口 ) 的 情况 。 其 他 视 口 下 的 选择 符 ， 大 家 可 以 看 示例 代码 。 


QGmedia (min-width: 55rem) ( 
.Item ( 
width: 25$; 
} 
/* 每 4 个 选 1 个 ， 但 仅 限 于 最 后 4 项 */ 
.Item:nth-child(4n+1) :nth-last-child(-n+4), 
/* 取得 该 集合 后 面 的 每 一 项 */ 
.Item:nth-child(4n+1) :nth-last-child(-n+4) ~ .Item { 
border-bottom: 0; 
} 
} 








这 里 我 们 连 级 使 用 了 基于 nth 的 伪 类 选择 符 。 而 这 里 的 关键 , 是 要 理解 第 一 

项 并 不 决定 接 下 来 的 选择 范围 ， 而 是 决定 每 个 选择 范围 中 必须 匹配 的 元 素 。 对 

前 面 的 例子 而 言 ， 第 一 个 元 素 必 须 是 每 4 个 中 的 第 一 个 元 素 ， 同 时 必须 是 最 后 4 
个 中 的 一 个 。 





不 错 ! 有 了 基于 nth 的 选择 符 ， 就 可 以 写 出 非常 可 靠 的 删除 最 后 一 行 底部 边框 的 规则 ， 与 视 





A > 
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口 大 小 或 每 一 行 的 项 数 无 关 。 





Top grossing films of 2014 
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[—] 
5.7.5 :not 
另 一 个 有 用 的 伪 类 选择 符 是 表示 “ 取 反 ”的 :not。 这 个 选择 符 用 于 选择 “ 非 ……”。 比 如 有 





如 下 标记 : 


<div class="a-div"></div> 
<div class="a-div"></div> 
<div class="a-div"></div> 
<div class="a-div not-me"></div> 
<div class="a-div"></div> 
和 以 下 CSS: 
div { 
display: inline-block; 
height: 2rem; 
width: 2rem; 


background-color: blue; 


.a-div:not(.not-me) ( 
background-color: orange; 
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border-radius: 50$; 


} 


最 后 一 条 规则 会 给 所 有 不 包含 .not -me 类 的 元 素 添加 橙色 背景 和 圆 角 。 可 以 参考 示例 代码 
example 05-07 ( 所 有 代码 示例 可 以 在 这 里 下 载 : http:/rwd.education/ )。 





到 目前 为 止 ， 我 们 主要 介绍 的 是 结构 化 的 伪 类 ， 而 CSS3 实 际 上 提供 了 更 多 

y% 选择 符 ( 关于 选择 符 的 详细 信息 建议 参考 这 里 : http:/www.w3.org/TR/selectors/ ). 

如 果 你 在 开发 Web 应 用 ， 那么 有 必要 了 和 解 所 有 与 UI 元 素 状态 相 关 的 伪 类 
( http://www.w3.org/TR/selectors/ ). 


5.7.6 :empty 


有 没有 遇 到 过 只 添加 了 一 些 内 边 距 , 而 内 容 会 在 将 来 某 个 时 刻 动态 插入 的 元 素 ? 这 个 元 素 有 
时 候 有 内 容 ， 有 时 候 没 有 。 问 题 在 于 ， 在 这 个 元 素 没 有 内 容 时 ， 它 的 内 边 距 还 在 。 比 如 下 面 这 个 
取 自 example_05-08 中 的 例子 ，HTML 和 CSS 如 下 : 
<div class="thing"></div> 
.thing { 
padding: lrem; 


background-color: violet; 


} 
虽然 它 没 有 内 容 ， 但 仍然 可 以 看 到 背景 颜色 。 好 在 我 们 可 以 这 样 隐藏 它 : 








.thing:empty ( 
display: none; 


) 
不 过 ,在 使 用 : empty 选 择 符 时 也 要 注意 ， 像 这 样 的 元 素 看 起 来 是 空 的 : 

















«div class-"thing"» «/div» 
而 实际 上 并 不 是 。 这 是 因为 其 中 有 一 个 空格 。 空 格 跟 空 是 两 码 事 ! 
还 有 ， 注 释 不 算 内 容 ， 所 以 像 这 样 包 含 注 释 而 不 包含 空格 的 元 素 ， 也 是 空 的 : 





«div class-"thing"»«!--I'm empty, honest I am--»«/div» 

修订 伪 元 素 
M 伪 类 从 CSS2 开 始 引 入 ，CSS3 又 对 其 语法 进行 了 修订 。 回 忆 一 下 ， 
p:first-line 会 选择 <zp> 标 签 中 的 第 一 行 。p:first-letter 会 选择 第 一 个 字 


ffo CSS3 要 求 把 这 种 伪 元 素 与 伪 类 区 分 开 。 因此 ,现在 应 该 写 p: :first-letter。 
要 注意 ，IE8 及 更 低 版 本 的 IE 不 支持 两 个 冒号 的 语法 。 
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5.7.7 :first-line 


:first-1ine 伪 元 素 选择 的 目标 根据 视 口 大 小 不 同 而 不 同 , 这 是 最 关键 的 。 比如, 以 下 规则 : 




















p::first-line ( 
color: sffOcff; 
} 


会 让 第 一 行文 本 显示 成 粉红 色 。 而 且 , 随 着 视 口 大 小 变化 , 呈现 粉红 色 的 文本 长 度 也 会 变化 。 

这 样 ， 不 用 修改 标记 ， 始 终 都 能 确保 第 一 行 被 选中 〈 ”第 一 行 ” 是 指 浏览 器 泻 染 结果 的 第 一 
行 ， 而 不 是 标记 中 文本 的 第 一 行 )。 在 响应 式 设 计 中 ， 利 用 这 个 伪 元 素 可 以 轻松 做 到 让 第 一 行 与 
其 他 行 的 样式 不 同 。 


























5.8 CSS 自 定 义 属 性 和 变量 


随 着 CSS 预 处 理 需 的 流行 ，CSS 也 慢 慢 出 现 了 可 编程 的 特性 。 首 先 就 是 自 定 义 属 性 。 虽 然 经 
常 被 称 为 变量 ， 但 作为 变量 并 非 自 定义 属性 的 唯一 用 途 。 具 体内 容 可 以 查看 规范 : 
http://dev.w3.org/csswg/css-variables/。 不 过 ， 浏 览 右 实现 的 支持 并 不 多 ( 2015 年 年 初 的 时 候 只 有 
Firefox )。 


CSS 自 定义 属性 可 以 存储 信息 ， 这 些 信息 可 以 在 样式 表 的 其 他 地 方 使 用 ， 也 可 以 通过 
JavaScript 操 作 。 举 个 简单 的 例子 ， 可 以 把 font -family 属 性 的 值 保存 为 自 定义 属性 ， 然 后 再 在 
需要 的 地 方 引用 它 。 以 下 就 是 创建 自 定义 属性 的 语法 : 




































































:root { 
--MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif; 


) 
这 里 ， 我 们 使 用 :root 伪 类 把 自 定 义 属性 保存 在 文档 根 元 素 上 (可 以 保存 到 任何 规则 中 )。 








M :root 伪 类 始终 引用 文档 结构 中 最 外 层 的 亲 元 素 。 在 HTML 文 档 中 ,这 个 亲 
Q 元 素 就 是 phtml 标签， 但 对 SVG 文档 (第 7 章 会 介绍 SVG ) 而 言 ， 则 会 引用 不 同 的 








自 定 义 属性 以 两 个 短 划 线 开头 ， 接 着 是 自 定 义 属性 的 名 字 ， 然 后 结尾 与 常规 CSS 属 性 一 样 ， 
都 是 一 个 冒号 。 


然后 ， 引 用 自 定 义 属 性 的 时 候 就 可 以 用 var () ， 像 这 样 : 


.Title ( 
font-family: var(--MainFont); 


} 
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一 方面 , 可 以 通过 这 种 方式 存储 任意 多 个 自 定义 属性 。 另 一 方面 , 不 管 什 么 时 候 修改 一 个 自 
定义 属性 的 值 , 所 有 引用 它 的 规则 , 无 论 有 多 少 , 都 会 自动 更 新 , 而 无 需 分 别 去 修改 每 一 条 规则 。 


将 来 ，JavaScript 有 望 可 以 操作 自 定义 属性 。 关 于 这 些 “ 疯 狂想 法 ”的 更 多 信息 ， 可 以 参考 
CSS Extension 模 块 : http://dev.w3.org/csswg/css-extensions/。 





























5.9 CSScalc 


是 不 是 经 常 在 布局 的 时 候 需 要 做 类 似 这 样 的 计算 :“ 它 应 该 是 父 元 素 宽度 的 一 半 减 去 10 像 
素 ”? 这 样 的 计算 在 响应 式 设计 中 非常 有 用 ， 因 为 我 们 提前 并 不 知道 屏幕 大 小 。 好 在 CSS 为 我 们 
提供 了 实现 这 种 计算 的 方法 ， 那 就 是 calc () 函数 。 以 下 就 是 一 个 示例 : 

.thing ( 


width: calc(50$ - 10px); 
} 


加 、 减 、 乘 、 除 都 没 问 题 ， 这 样 就 可 以 解决 以 前 非得 用 JavaScript 才 能 解决 的 一 堆 问题 。 


WE, 浏览 器 对 calc O 函数 的 支持 也 很 好 ,除了 Android 4.3 及 以 下 版 本 中 的 Chrome。 相 关 
规范 可 以 参见 这 里 : http://www.w3.org/TR/css3-values/。 

















5.10 CSS Level 4 选择 符 

CSS Selectors Level 4 ( 目前 还 是 工作 草案 : https://drafts.csswg.org/selectors-4/ ) 中 规定 了 很 
多 新 的 选择 符 类 型 。 然 而 ， 在 本 书写 作 时 ,还 没有 浏览 器 实 现 这 些 选择 符 。 为 此 ,我 们 这 里 只 看 
一 个 选择 符 ， 因 为 它们 未 来 都 有 可 能 变 。 


Relational 伪 类 选择 符 出 自 最 新 草案 的 “Logical Combinations” 一 节 ( http://dev.w3.org/csswg/ 
selectors-4/ )。 





5.10.1 :has 伪 类 
这 个 伪 类 的 格式 如 下 : 
a:has (figcaption) { 

padding: lrem; 


} 


这 条 规则 可 以 给 一 个 包含 figcaption 的 a 标签 添加 内 边 距 。 组 合 使 用 “ 取 反 ” 伪 类 ， 可 以 
反 转 选择 范围 : 


a:not(:has(figcaption)) { 
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padding: lrem; 
} 


这 样 ， 只 有 不 包含 figcaption 的 a 标签 才 会 添加 这 个 内 边 距 。 
我 承认 , 这 个 新 规范 中 有 很 多 新 选择 符 都 非常 好 。 只 是 什么 能 在 浏览 器 里 安心 地 使 用 它们 还 
是 个 未 知 数 。 














5.10.2 ”相对 视 口 的 长 度 


不 谈 未 来 了 。 之 前 我 们 讨论 了 怎么 在 响应 式 网 页 中 选择 元 素 , 但 没有 提 到 如 何 设 定 它们 的 大 
小 。CSS Values and Units Level 3 ( http://www.w3.org/TR/css3-values/ ) 引入 了 相对 视 口 的 长 度 单 
位 。 这 些 单 位 对 响应 式 设 计 非 常 重要 ， 每 种 单位 都 是 视 口 的 某 种 形式 的 百分比 。 











O vw: 视 口 宽度 

Q vh: 视 口 高 度 

口 vmin: 视 口 中 的 最 小 值 ， 等 于 vw 或 vh 中 较 小 的 值 

口 vmax: 视 口 中 的 最 大 值 ， 等 于 vm 或 vh 中 较 大 的 值 

浏览 器 对 这 几 个 单位 的 支持 也 不 错 ， 参 见 : http://caniuse.com/。 


想 要 一 个 高 度 为 浏览 器 窗口 高 度 90% 的 模 态 弹 层 ? 很 简单 : 





.modal { 
height: 90vh; 
} 
y 相对 视 口 的 单位 虽然 有 用 ， 但 有 些 浏览 器 的 实现 却 很 奇怪 。 比 如 ，iOS 8 中 
的 Safari 在 向 下 滚动 页 面 时 ( 地 址 栏 会 收缩 )， 不 会 改变 视 口 的 高 度 。 
在 设 定 字体 字号 时 结合 使 用 这 些 相 对 单位 很 不 错 ， 可 以 让 文字 随 着 视 口 的 大 小 变化 而 缩放 。 


虽然 现在 就 可 以 拿 出 一 个 例子 , 不 过 我 还 想 给 大 家 展示 一 种 不 同 的 字体 。 不 管 你 在 Windows、 
Mac 还 是 Linux 机 器 上 看 ， 这 种 字体 都 一 样 。 


好 吧 ， 不 吹牛 了 ， 我 要 说 的 其 实 就 是 CSS3 中 的 Web 字 体 。 








5.11 Web 排版 


多 年 来 ， Web 字体 的 选择 一 直 被 局 限 在 几 款 “安全 ”字体 上 。 在 遇 到 必须 严格 还 原 的 设计 时 ， 
不 得 不 做 成 图 片 放 上 去 ， 然 后 再 通过 文本 缩 进 把 文字 隐藏 到 视 口 之 外 。 嗯 ， 还 不 错 。 
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后 来 也 出 现 了 几 种 在 网 页 中 呈现 不 同 版 式 的 方案 ， 比 如 SIFR ( http:/www.mikeindustries. 
com/blog/sifr/ ), 344 Cufón ( http://cufon.shoqolate.com/generate/ ), 它们 分 别 使 用 Flash 和 JavaScript 
重新 创建 了 文本 元 素 , 并 将 它们 以 必要 的 字体 显示 出 来 。CSS3 为 此 推出 了 Web 字 体 , 现在 是 见证 
奇迹 的 时 刻 了 ! 





5.11.1 Gfont-face 


@font-face 规 则 在 CSS2 中 就 有 了 (后 来 在 CSS2.1 中 消失 了 ),IE4 当 时 部 分 支持 @font-face 
规则 ( 是 的 ， 是 真 的 ! )。 那 既然 我 们 讨论 CSS3 ， 跟 它 又 有 什么 关系 呢 ? 


THE, 在 CSS3 Font 模 块 中 (http://www.w3.org/TR/css3-fonts )，efont -face 又 回来 了 。 在 网 
页 中 使 用 字体 一 直 是 个 难题 ， 直 到 最 近 几 年 Web 排 版 才 又 重新 被 人 重视 起 来 。 


Web 上 的 所 有 资源 都 没有 唯一 的 格式 ， 比 如 图 片 就 有 JPEG 、PNG 和 GIF， 以 及 其 他 格式 。 字 
体 当 然 也 有 很 多 种 格式 。 比 如 下 偏爱 的 Embedded OpenType (.eot), TrueType ( .ttf )， 还 有 SVG 
格式 和 Web Open Font Format ( .woff/.woff2 )。 


目前 ， 必 须 给 一 种 字体 提供 多 种 格式 的 版 本 才能 获得 多 浏览 器 兼容 性 。 
好 在 针对 每 种 浏览 器 添加 自 定 义 字体 格式 很 简单 。 下 面 就 来 看 一 看 吧 。 












































5.11.2 ”通过 efont-face 实现 Web 字体 
CSS 提 供 了 efont -face 规 则 ， 用 于 引用 在 线 字体 显示 文本 。 


目前 已 经 有 很 多 查看 和 获得 Web 字 体 的 资源 , 有 的 免费 , 有 的 需要 付费 ,我 个 人 比较 喜欢 Font 
Squirrel ( http//www.fontsquirrel.com/ )， 当 然 谷 歌 也 有 免费 的 Web 字 体 ， 可 以 用 efont-face 规 则 
来 使 用 (http:/www.google.com/webfonts ) 。 此 外 ， 也 有 不 错 的 付费 资源 ， 像 Typekit 
( http://www.typekit.com/ ) 和 Font Deck ( http://fontdeck.com/ )。 


作为 练习 ， 我们 打算 下 载 Roboto。 这 种 字体 在 后 期 的 安 章 终端 上 很 常见 ， 是 一 种 很 适合 小 屏 
幕 显示 的 界面 字体 。 可 以 在 这 里 一 睹 她 的 芳 容 : https://www.fontsquirrel.conyfonts/roboto。 


如 果 能 下 载 到 某 个 字体 的 针对 某 种 语言 的 “ 子 集 "， 那 就 只 下 载 那 一 部 分 。 
c — 这样 的 文件 会 比 包含 全 部 内 容 的 文件 小 。 


下 载 了 efont-face 包 之 后 , 打开 ZIP 文 件 就 可 以 看 到 Roboto 字 体 中 包含 的 文件 夹 , 对 应 不 同 
的 版 本 。 这 里 选择 Roboto Regular 版 ， 在 相应 的 文件 夹 中 有 多 种 文件 格式 (WOFF、TTF、EOT 和 
SVG), 还 有 一 个 包含 所 有 字体 的 stylesheet.css 文 件 。 例 如 ，Roboto Regular 版 本 对 应 的 规则 如 下 : 
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Gfont-face { 
font-family: 'robotoregular'; 
src: url('Roboto-Regular-webfont.eot'); 
src: url('Roboto-Regular-webfont.eot?ftiefix') format('embeddedopentype'), 


( ' 
url('Roboto-Regular-webfont.woff') format('woff'), 
url('Roboto-Regular-webfont.ttf') format('truetype'), 
url('Roboto-Regular-webfont.svgfdstrobotoregular') 


format('svg'); 
font-weight: normal; 
font-style: normal; 


) 
与 提供 商 前 级 的 机 制 很 类 似 , 浏览 器 也 会 依次 尝试 属性 列表 中 的 样式 ,忽略 不 能 识别 的 内 容 
(属性 值 越 靠 下 ， 优 先 级 越 高 )。 这 样 ， 无 论 什 么 浏览 器 ， 总 有 一 款 适 合 它 。 
好 ,虽然 这 段 代码 可 以 直接 复制 粘贴 , 但 粘贴 之 后 别 忘 了 修改 路 径 。 一 般 我 会 把 解压 得 到 的 
字体 文件 放 到 与 css 文 件 夹 同 级 的 fonts 文 件 夹 中 。 因 此 复制 粘贴 后 ， 需 要 把 路 径 修改 成 这 样 : 


Gfont-face { 














Ini 

















font-family: 'robotoregular'; 
src: url('../fonts/Roboto-Regular-webfont.eot'); 
src: url('../fonts/Roboto-Regular-webfont.eot?fiefix') 
format ('embedded-opentype'), 
url('../fonts/Roboto-Regular-webfont.woff') format('woff'), 
url('../fonts/Roboto-Regular-webfont.ttf') 
format('truetype'), 
url('../fonts/Roboto-Regular-webfont.svgttrobotoregular') 


format('svg'); 
font-weight: normal; 
font-style: normal; 


} 


然后 只 要 设置 正确 的 字体 和 粗细 就 行 了 。 请 参考 example_05-10， 它 与 example_05-09 的 标记 
相同 ， 只 是 默认 声明 了 如 下 字体 : 
body { 


font-family: robotoregular; 


} 


使 用 Web 字 体 还 有 一 个 好 处 。 如 果 设 计 图 中 使 用 了 与 你 代码 中 相同 的 字体 ， 可 以 直接 使 用 设 
计 图 中 的 字体 大 小 。 比 如 ，PhotoShop 中 的 字号 是 24 像 素 ， 那 你 可 以 直接 用 这 个 值 ， 或 者 将 它 转 
换 成 相对 大 小 ， 比 如 rem (假设 根 元 素 的 font -size 为 16 像 素 ， 那 24/16=1.5rem )。 


不 过 ,前 面 说 了 , 我 们 现在 可 以 使 用 相对 视 口 的 单位 了 。 可 以 相对 于 视 口 大 小 设置 不 同 的 文 
本 大 小 : 


body ( 
font-family: robotoregular; 
font-size: 2.1vw; 


} 
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@media (min-width: 45rem) ( 
html, 
body { 
max-width: 50.75rem; 
font-size: 1.8vw; 
} 
} 


@media (min-width: 55rem) ( 
html, 
body { 
max-width: 78.75rem; 
font-size: 1.7vw; 
) 
} 


如 果 在 浏览 器 中 打开 这 个 例子 并 缩放 视 口 ， 可 以 看 到 仅仅 几 行 CSS 就 把 文本 变 得 可 缩放 了 。 





5.11.3. ”注意 事项 


总 体 来 说 ， 使 用 efont-face 引 入 Web 字 体 是 非常 好 的 。 响 应 式 设 计 中 ， 使 用 afont-face 
唯一 一 个 需要 注意 的 问题 就 是 文件 大 小 。 比 如 我 们 前 面 的 例子 ， 如 果 设 备 泻 染 需 要 SVG 格式 的 
Roboto Regular， 那 相对 于 使 用 标准 的 Web 安 全 字体 (如 Arial )， 就 需要 多 下 载 34 KB 文件 。 我 们 
的 例子 中 使 用 了 英文 字体 的 子 集 以 缩小 文件 , 但 并 非 任 何 时 候 都 可 以 这 样 做 。 如 果 你 很 在 意 网 站 
的 性 能 ， 就 需要 关注 一 下 自 定 义 字 体 的 大 小 。 

















5.12 CSS3 的 新 颜色 格式 及 透明 度 


本 章 到 现在 一 直 讲 CSS3 提 供 的 选择 页 面 元 素 的 选择 符 , 以 及 使 用 Web 字 体 。 接 下 来 应 该 看 一 
看 CSS3 新 增 了 哪些 颜色 相关 的 特性 了 。 


首先 ，CSS3 新 增 了 两 种 声明 颜色 的 格式 : RGB 和 HSL。 此 外 ， 这 两 种 颜色 模式 还 支持 alpha 
通道 (RGBA 和 HSLA )。 




















5.12.1 RGB 


RGB ( Red Green Blue， 红 绿 蓝 ) 是 一 种 沿用 了 几 十 年 的 颜色 系统 ， 原 理 是 分 别 定 义 红 、 绿 、 
蓝 三 原色 分 量 的 值 。 比 如 ， 在 CSS 中 十 六 进 制 的 红色 是 #fe0208: 














.redness { 
color: #fe0208; 
} 
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M 关于 如 何 直观 地 理解 十 六 进 制 颜色 值 ， 推 荐 大 家 看 看 Smashing Magazine 上 
Q 的 这 篇 文章 : http:/www.smashingmagazine.com/2012/10/04/the-code-side-of- 
color/。 


而 在 CSS3 中 ， 可 以 这 样 定义 同样 的 RGB 值 : 


.redness { 
color: rgb(254, 2, 8); 
} 
大 多 数 图 片 编辑 软件 都 能 显示 颜色 的 十 六 进 制 值 和 RGB 值 。 比 如 PhotoShop 的 取 色 器 里 就 有 
单独 的 R、G、B 框 ,显示 每 个 通道 的 分 量 值 。 把 它们 直接 入 对 应 到 CSS 的 RGB 值 里 就 可 以 , 语法 
是 把 它们 放 在 一 对 括号 中 ， 按 红 、 绿 、 蓝 的 顺序 ， 前 面 加 上 rgb 字 样 。 




















5.12.2 HSL 


除了 RGB ，CSS3 还 支持 HSL (Hue Saturation Lightness， 色 相 、 饱 和 度 、 亮 度 ) 颜色 系统 。 


HSL 与 HSB 不 同 


HSL 与 PhotoShop 等 图 片 处 理 软件 中 的 HSB ( Hue Saturation Brightness ) 不 一 
样 ， 别 搞 错 了 ! 


HSL 相 对 来 说 更 好 理解 一 些 。 比 如 ， 除 非 你 对 色 值 真 的 很 精通 ,否则 很 难说 rgb(255,51,204) 
是 什么 颜色 ? 有 不 服 的 吗 ? 没有 ,我 也 说 不 出 来 ,可 是 ,给 我 一 个 HSL 值 , 比如 hs1(315,100%,60%)， 
我 能 大 概 猜 出 来 这 是 一 种 介 于 洋红 和 红 之 间 的 颜色 。 我 是 怎么 知道 的 ? 很 简单 。 


HSL 有 一 个 360 度 的 色 轮 ， 这 样 的 : 
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HSL 值 中 的 第 一 个 设置 Hue, 即 色相 。 在 上 面 的 色 轮 中 , 黄色 在 60 度 , 绿色 在 120 度 , 青 在 180 
度 ， 蓝 在 240 度 ， 洋 红 在 300 度 ， 红 在 360 度 。 而 前 面 的 HSL 色 的 色相 值 是 315 ， 根据 这 个 色 轮 ， 很 


容易 知道 它 介 于 洋红 C300) 和 红 (360) 之 间 。 

后 面 两 个 值 分 别 定 义 饱 和 度 和 亮度 ， 以 百分比 形式 给 出 。 它 们 只 会 修改 基本 的 色相 。 更 饱和 
是 指 色 彩 更 浓烈 ， 百 分 比 相对 更 大 。 亮 度 也 一 样 ， 如 果 值 为 100%， 那 就 是 白色 了 。 
在 定义 了 一 种 HSL 颜 色 后 , 很 容易 派生 出 多 个 相近 的 颜色 ， 只 要 修改 饱和 度 和 亮度 的 百分比 
就 行 了 。 比 如 ， 前 面 定义 的 颜色 可 以 改 成 这 样 : 















































.redness { 
color: hs1(359, 99$, 50$); 


) 
如 果 想 让 它 的 颜色 暗 一 些 ， 可 以 只 修改 亮度 的 百分比 : 





.darker-red { 
color: hs1(359, 99$, 40%); 


) 
总 之 ,只 要 记 住 色 轮 中 不 同 角 度 对 应 的 颜色 ， 就 能 大 概 估计 出 HSL 颜 色 。 然 后 不 用 借助 颜色 


选取 器 ， 同 样 可 以 再 定义 出 相近 颜色 的 变 体 来 。 








5.12.3 alpha 通道 

有 人 可 能 会 问 ,为 什么 放 着 用 了 那么 多 年 的 可 靠 的 十 六 进 制 颜色 值 不 用 ， 突 然 要 使 用 HSL 或 
RGB 颜色 值 呢 ? HSL 或 RGB 与 十 六 进 制 值 的 区 别 在 于 , 它们 支持 透明 通道 , 可 以 让 原来 被 元 素 挡 
住 的 东西 透 过 来 。 

HSLA 声 明 与 标准 的 HSL 声 明 类 似 ， 只 是 必须 声明 值 为 hsla ( 在 hsl 后 面 加 个 a )， 同 时 再 多 指 
定 一 个 不 透明 度 值 ， 取 值 范围 为 0 ( 完全 透明 ) 到 1 ( 完全 不 透明 )。 比 如 : 








.redness-alpha ( 
color: hsla(359, 99$, 50$, .5); 


} 
RGBA 语 法 的 规则 与 HSLA 相 同 : 


.redness-alpha-rgba { 
color: £gba(255; 255,255, 0.8); 


} 
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为 什么 不 只 使 用 不 透明 度 ? 


M CSS3 也 支持 设置 元 素 的 opacity 属 性 ， 取 值 范围 也 是 0 到 1 ( .1 表示 10% )。 

与 RGBA 和 HSLA 不 同 ， 对 元 素 设置 opacity 影 响 整个 元 素 ， 而 RGBA 和 HSLA 
则 只 影响 元 素 特定 的 方面 ， 比 如 背景 。 这 样 就 可 以 实现 元 素 中 不 透明 的 文字 和 
透明 的 背景 。 


5.12.4 CSS Color Module Level 4 的 颜色 操作 
虽然 这 个 规范 还 在 早期 阶段 ， 但 在 CSS 中 享受 color () 函数 的 日 子 应 该 不 远 了 。 


在 浏览 器 广泛 支持 以 前 ,这 种 事 最 好 通过 CSS 预 /后 处 理 器 来 做 (让 自己 提高 一 下 ,， 买 本 相关 
图 书 看 看 。 我 推荐 Ben Frain 的 《Sass 和 Compass 设计 师 指南 》)。 


关于 CSS Color Module Level 4 的 进度 ， 可 以 查看 这 个 链接 : http://dev.w3.org/csswg/css- 
color-4/。 

















5.13 ”小结 


本 章 ， 我 们 学 习 了 使 用 CSS3 的 新 选择 符 选择 几乎 页 面 中 的 任何 元 素 。 同 时 ， 还 学 习 了 如 何 
实现 响应 式 的 列 和 滚动 面板 ， 以 及 解决 长 URL 折 行 等 麻烦 的 问题 。 而 且 ， 我 们 也 理解 了 CSS3 新 
的 颜色 模块 和 如 何 使 用 RGB 及 HSL， 并 通过 它们 设置 透明 度 ， 实 现 美妙 的 效果 。 


另外 ， 这 一 章 还 介绍 了 使 用 efont-face 规 则 引入 Web 字 体 ， 证 我 们 不 再 被 所 谓 的 Web 安 全 
字体 所 束缚 。 这 些 内 容 不 少 吧 ? 但 这 些 还 只 是 CSS3 这 个 宝库 的 冰山 一 角 。 接 下 来 ， 我 们 会 继续 
探索 CSS3 给 响应 式 设计 带 来 的 便利 特性 ， 看 看 怎么 利用 它 让 我 们 的 页 面 加 载 更 快 、 开 发 更 敏捷 、 
维护 更 轻松 ， 比 如 文本 阴影 、 盒 阴影 、 渐 变 和 多 重 背 景 。 



























































第 6 章 


CSS3 高 级 技术 











CSS3 的 高 级 属性 十 分 适合 响应 式 设计 ,很 多 情况 下 ,我 们 可 以 用 它 来 替代 图 片 。 这 样 既 省 
时 ， 又 能 增加 代码 的 可 维护 性 和 灵活 度 ， 还 能 让 页面 更 “ 轻 ”。 这 些 优势 即便 是 在 固定 宽度 的 桌 
面 设计 中 也 很 有 用 ， 在 响应 式 设计 中 则 更 加 重要 , 使 用 CSS 可 以 在 不 同 视 口 中 轻松 创造 出 不 同 的 
酷 炫 效果 。 


FENZ: 


a 使 用 CSS3 制 作文 字 阴 影 

口 使 用 CSS3 制 作 盒 阴 影 ( 即 元 素 投影 ) 

口 使 用 CSS3 制 作 渐 变 背 景 

口 使 用 CSS3 的 多 重 背景 图 片 

口 使 用 CSS3 的 背景 渐变 制作 图 案 

口 使 用 媒体 查询 来 插入 高 分 辩 率 的 背景 图 片 
口 使 用 CSS 滤 镜 


让 我 们 开始 吧 。 












































浏览 器 私有 前 组 
M 当 使 用 试验 性 CSS 功 能 时 ,记得 使 用 工具 而 不 是 手动 去 添加 相关 的 浏览 器 私 
Q 有 前 级 。 这 确保 了 跨 浏 览 器 的 兼容 性 ， 也 防止 你 添加 不 再 需要 的 前 级 。 我 在 很 
多 章节 都 提 到 了 Autoprefixer ( https://github.com/postcss/autoprefixer )， 因 为 在 编 
写本 书 的 时 候 ， 我 认为 它 是 完成 这 项 任务 的 最 佳 工具 。 


6.1 CSS3 的 文字 阴影 特效 
text-shadow 是 最 被 广泛 支持 的 CSS3 特 性 之 一 。 和 @font-face 一 样 , 它 有 过 一 段 短暂 的 前 


^E, 但 是 在 CSS2.1 中 被 废弃 了 。 JE, 它 再 次 转世 投胎 , 并 被 广泛 支持 (所 有 的 现代 浏览 器 和 IE9 
以 上 的 浏览 需 都 支持 ) 我 们 来 看 一 下 基本 语法 : 
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.element { 
text-shadow: 1px 1px 1px #ccc; 
} 


WE, 缩写 值 的 规则 是 先 右 后 下 ( 当然 ， 你 可 以 将 其 视 为 顺 时 针 顺 序 )。 因 此 ， 第 一 个 值 是 
阴影 的 右 侧 偏 移 量 , 第 二 个 值 是 阴影 的 下 方 偏 移 量 , 第 三 个 值 是 模糊 距离 ( 阴影 从 有 到 无 的 渐变 
距离 )， 最 后 一 个 则 是 色 值 。 

要 想 让 阴影 往 左 上 方 偏 移 ， 可 以 使 用 负 值 。 如 下 : 


.text ( 
text-shadow: -4px -4px 0px #dad7d7; 

































































} 
色 值 并 不 一 定 需要 用 十 六 进 制 表示 。 也 可 以 使 用 HSL(A) 或 者 RGB(A): 
text-shadow: 4px 4px 0px hsla(140, 3$, 26$, 0.4); 
需要 谨 记 的 是 ， 只 有 同时 支持 HSL/RGB 色 值 模式 和 text-shadow 的 浏览 嚣 才 可 以 泻 染 出 这 
你 可 以 把 阴影 值 设 为 任何 合法 的 CSS 长 度 单位 ， 如 em、rem、ch 等 。 但 我 个 人 较 少 使 用 em 和 
rem 单 位 。 诸 如 1px 和 2px 这 样 的 值 在 所 有 视 口 都 看 起 来 比较 好 。 
当然 ， 我 们 也 可 以 通过 媒体 查询 在 特定 的 视 口 下 去 除 文字 阴影 效果 。 使 用 none 值 即 可 。 


.text { 
text-shadow: .0625rem .0625rem 0 #bfbfbf; 















































} 
@media (min-width: 30rem) { 
.text { 
text-shadow: none; 
j 
} 


y 顺便 提 一 下 ， 在 CSS 中 ， 对 于 以 0 开头 的 数值 ， 可 以 将 0 省 去 。 如 0.14s 就 可 
以 写成 .14s。 

6.1.1 省 略 blur 值 
如 果 你 不 需要 给 文字 阴影 添加 模糊 效果 ， 那 么 可 以 在 声明 中 把 blur 值 省 略 。 例 如 ; 


.text { 
text-shadow: -4px -4px :$dad7d7; 




















) 
这 种 写法 是 完全 合法 的 。 浏 览 器 会 在 没有 第 三 个 长 度 值 的 情况 下 把 前 两 个 值 作 为 偏 移 量 。 
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6.1.2. ”多 文字 阴影 


我 们 可 以 添加 多 个 阴影 效果 ， 通 过 逗号 分 隔 即 可 ， 比 如 : 


.multiple { 


text-shadow: 0px 1px #fff,4px 4px Opx #dad7d7; 


} 


由 于 CSS 会 忽略 空白 ， 你 可 以 这 样 排版 以 增加 可 读 性 。 


.text { 





font-size: calc(100vmax / 40); /* 100 of vh or vw, whichever is 
larger divided by 40 */ 


text-shadow: 


3px 3px #bbb, /* right and down */ 
-3px -3px 14999; /* left and up */ 


想 要 了 解 W3C 对 text-shadow 属 性 的 标准 定义 ,请 参阅 https://www.w3. 
org/TR/css-text-3/。 


6.2 £z 





阴影 容许 你 在 元 素 的 内 部 或 者 外 部 创建 盒 状 的 阴影 效果 。 掌握 了 文字 阴影 , 盒 阴 影 就 是 小 








菜 一 RT. 它们 遵循 相同 的 语法 : 水 平 偏 移 值 、 垂 直 偏 移 值 、 模 糊 距离 、 阴 影 尺寸 ( 接 下 来 会 讨 e 
论 这 个 语法 )， 以 及 阴影 颜色 。 



































四 个 长 度 值 中 只 有 两 个 是 必需 的 C 当 最 后 两 个 长 度 值 不 存在 的 时 候 , 颜色 值 会 被 当 作 阴影 颜 


色 ， 而 0 值 会 被 添加 到 模糊 半径 


.Shadow { 


于 上 )。 让 我 们 来 看 一 个 简单 的 例子 : 


box-shadow: 0px 3px 5px #444; 


} 











默认 的 box-shadqow 是 设置 在 元 素 外 部 的 。 另 外 一 个 可 选 关键 词 inset 容 许 在 元 素 内 部 使 用 


box-shadows 


6.2.1 内 阴影 





box-shadow 属 性 可 以 用 于 建立 一 个 inset 阴 影 。 使 用 的 语法 和 普通 盒 阴 影 效 果 唯 一 的 区 别 
JE, EMRI T inset KEF: 


.inset { 


box-shadow: inset 0 0 40px #000; 


} 
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所 有 的 功能 和 之 前 是 一 致 的 , 但 是 inset 声 明 让 浏览 器 把 阴影 设 在 了 元 素 的 内 部 。 你 可 以 通 
过 查看 example_06-01 来 看 到 不 同 的 效果 : 











元 素 外 部 的 盒 阴 影 元 素 内 部 的 盒 阴 影 

















6.22 多重 阴影 


和 text-shadow 一 样 ， 你 也 可 以 添加 多 个 box-shadow。 使 用 去 号 分 隔 box-shadow， 它 们 
会 按照 从 底部 到 顶部 C 从 最 后 一 个 到 第 一 个 ) 的 顺序 被 添加 。 所 以 切记 ,在 代码 里 越 接近 顶层 的 
效果 在 浏览 器 展示 的 时 候 也 越 接近 “顶层 "。 和 text-shadqow 一 样 ， 你 可 以 用 空白 来 琶 加 不 同 的 


box-shadows 














box-shadow: inset 0 0 30px hsl1(0, 0$, 02), 
inset 0 0 70px hsla(0, 97$, 53$, 1); 


m 把 多 个 值 在 代码 中 堆 起 来 会 在 使 用 版 本 控制 系统 时 带 来 极 大 的 便利 。 这 会 
Q 让 你 轻易 地 看 出 两 个 文件 版 本 的 差别 。 这 就 是 我 为 什么 习惯 把 选择 器 一 个 接 一 
个 堆 起 来 。 


6.2.3 ”阴影 尺寸 

老实 说 ， 多 年 来 我 都 不 太 理解 “阴影 尺寸 ”这 一 词 的 意思 。 我 并 不 觉得 “尺寸 ”(spread ) 这 
个 名 字 比 较 贴切 。 我 更 偏向 于 使 用 偏 移 。 让 我 解释 一 下 。 

观看 example 06-02 左 侧 的 盒子 。 这 里 使 用 的 是 标准 的 box-shadow。 右 侧 的 盒子 使 用 了 一 个 
负 的 阴影 尺寸 值 。 它 是 用 第 四 个 值 设置 的 。 下 面 是 相关 代码 : 









































.no-spread { 
box-shadow: 0 10px 10px; 
} 


.Spread { 





box-shadow: 0 10px 10px -10px; 
} 


以 下 是 浏览 器 展现 的 效果 ( 右 图 设置 了 阴影 尺寸 的 值 ): 























未 设置 阴影 尺寸 设置 了 阴影 尺寸 














明 影 尺寸 让 你 可 以 按照 你 的 设置 在 所 有 方向 上 缩放 阴影 效果 。 在 这 个 例子 中 , 一 个 负 值 可 以 
在 各 个 方向 上 缩小 阴影 的 效果 。 最终 效果 就 是 我 们 只 看 到 底部 有 阴影 , 而 不 是 看 到 阴影 全 方位 地 
“泄露 ”出 来 ( 因为 模糊 距离 被 负 的 阴影 尺寸 所 抵消 了 )。 














想 要 了 解 W3C 对 box-shadow 属 性 的 标准 定义 ， 请 参阅 https://www.w3.org/ 
一 TR/css3-background/。 


63 ”背景 渐变 


在 没有 CSS3 的 日 子 里 ， 如 果 想 做 一 个 背景 渐变 效果 ， 就 要 用 一 个 很 细 的 渐变 切片 进行 水 平 / 
垂直 平 铺 。 对 于 使 用 图 片 而 言 ， 这 确实 是 一 个 经 济 实用 的 好 方案 。 一 张 仅 有 一 两 像素 宽 的 图 片 ， 
不 会 给 宽带 造成 太 大 负担 ， 而 且 它 可 以 用 在 网 站 的 多 个 元 素 上 。 


然而 ， 如 果 我 们 想 调 整 渐变 效果 ,仍然 需要 返回 到 图 片 编辑 器 里 。 男 外 ， 内 容 可 能 偶尔 会 太 
大 而 超出 渐变 背景 。 这 个 问题 增加 了 响应 式 设计 的 复杂 性 ， 因 为 在 不 同 视 口 下 ， 页面 的 任意 一 部 
分 都 会 增 大 。 

自从 CSS 的 packground-image 横 空 出 志 后 , 事情 变 得 容易 多 了 。 作 为 CSS Image Values and 
Replaced Content Module Level 3 文档 中 的 一 部 分 ，CSS 的 这 个 属性 容许 我 们 创造 线性 或 者 径 向 渐 
变 背 景 。 让 我 们 看 看 如 何 使 用 它们 。 






































A 想 要 了 解 CSS Image Values and Replaced Content Module Level 3, 35 
Q https://www.w3.org/TR/css3-images/.; 
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6.3.1 线性 渐变 语法 
linear-gradient 的 最 简 表 达 方 式 看 上 去 像 这 样 : 
.linear-gradient ( 
background: linear-gradient(red, blue); 


) 
这 会 创建 一 个 从 红色 渐变 为 蓝 色 的 〈 默 认 从 项 部 开始 ) 的 渐变 背景 。 








1. 确定 渐变 方向 
有 几 种 方式 可 以 确定 渐变 的 方向 。 一 般 而 言 ,渐变 将 从 你 设 定 的 方向 的 反方 向 开始 。 当 没有 
设置 方向 的 时 候 ， 渐 变 会 默认 从 项 部 到 底部 。 例 如 : 








.linear-gradient ( 
background: linear-gradient(to top right, red, blue); 


) 
在 这 段 代码 中 ， 渐 变 的 方向 设 定 为 顶部 右 侧 。 那 么 它 会 从 底部 左 侧 开始 从 红色 渐变 为 蓝 色 。 





如 果 你 数学 思维 比较 好 ， 可 能 会 倾向 于 这 么 使 用 : 


.linear-gradient ( 
background: linear-gradient(45deg, red, blue); 
J 


不 过 需要 注意 的 是 ,在 一 个 矩形 里 ,一 个 指向 顶部 右 侧 的 渐变 ( 总 是 指向 元 素 右 上 角 ) 和 指 
向 45 度 的 渐变 ( 总 是 指向 45 度 ) 还 是 有 差异 的 。 


另外 ， 你 也 可 以 让 渐变 效果 从 不 可 见 的 区 域 中 开始 。 如 下 例 : 















































.linear-gradient ( 
background: linear-gradient(red -50$, blue); 


} 

这 样 渐变 会 在 容器 内 部 不 可 见 的 地 方 就 开始 泻 染 。 

事实 上 ， 在 上 面 这 个 例子 中 我 们 使 用 了 色 标 来 定义 颜色 什么 时 候 开 始 与 结束 。 我 们 来 仔细 
看 看 。 

2. 色 标 

在 背景 渐变 中 最 难 理解 的 大 概 就 是 色 标 了 。 它们 用 于 把 渐变 中 的 某 个 点 设 定 为 特定 颜色 。 
可 以 使 用 色 标 定义 复杂 的 渐变 效果 。 看 以 下 例子 : 














尔 











一 











.linear-gradient ( 
margin: 1rem; 
width: 400px; 
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height: 200px; 

background: linear-gradient(4f90 0, #f90 2%, 4555 2$, #eee 50$, #555 
98$, #f90 98$, #f90 1002); 
} 


这 就 是 1inear-gradient 演 染 的 效果 : 

















在 example_06-03 中 ， 因 为 方向 未 被 定义 ， 所 有 默认 从 顶部 到 底部 进行 渐变 。 


渐变 效果 中 的 色 标 是 用 逗号 进行 分 隔 的 。 第 一 部 分 是 颜色 ,第 二 部 分 是 颜色 的 位 置 。 一 般 建 
议 不 要 混用 单位 。 你 可 以 在 一 个 渐变 效果 中 添加 多 个 色 标 ， 而 且 可 以 使 用 关键 词 、 十 六 进 制 、 


RGBA 或 者 HSLA 等 色 值 写法 。 amm 


要 注意 的 是 ， 多 年 以 来 已 经 产生 了 多 种 不 同 的 背景 渐变 语法 。 所 以 兼容 以 
> 往 的 写法 是 个 比较 困难 的 事情 。 尽 管 这 祥 我 可 能 会 显得 十 分 嘴 叫 ， 但 我 还 是 要 
叮 跑 一 下 ， 你 可 以 使 用 Autoprefixer 来 解决 这 些 问 题 。 这 允许 你 使 用 现代 的 W3C 

标准 语法 ， 而 且 它 会 自动 兼容 先前 的 写法 。 











想 要 了 解 W3C 对 线性 渐变 背景 的 标准 定义 ， 请 参阅 https://www.w3.org/TR/css3-images/。 


3. 兼容 旧式 浏览 器 





要 兼容 不 支持 背景 渐变 效果 的 浏览 器 ， 只 需要 在 之 前 定义 一 个 背景 颜色 就 可 以 了 。 这样, E 
旧 浏 览 器 至 少 会 泻 染 一 个 背景 。 如 下 例 : 


.thing ( 
background: red; 


background: linear-gradient(45deg, red, blue); 
} 
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6.3.2 ” 径 向 渐变 背景 


在 CSS 里 建立 一 个 径 向 渐变 也 是 十 分 简单 的 。 效果 一 般 是 从 一 个 中 心 发 散 成 为 圆 形 或 者 椭圆 
形 的 渐变 效果 。 


下 面 是 径 向 渐变 背景 的 语法 (你 可 以 在 example 06-04 中 体会 ): 











.radial-gradient ( 

margin: lrem; 

width: 400px; 

height: 200px; 

background: radial-gradient(12rem circle at bottom, yellow, 
orange, red); 


) 
理解 径 向 渐变 语法 


在 background 属 性 后 ， 我 们 设 定 radial-gradient。 在 第 一 个 逗号 前 ， 我 们 定义 渐变 形 
状 、 大 小 和 所 在 位 置 。 上 例 中 我 们 使 用 了 直径 为 12rem 的 圆 形 渐变 效果 ,下面 我 们 看 看 其 他 例子 。 


O 设置 为 5em 会 生成 一 个 直径 大 小 为 5em 的 圆 形 渐变 效果 。 如 果 只 提供 大 小 的 话 ， 会 默认 使 
































用 圆 形 。 
口 设置 为 circle 会 生成 一 个 占 满 整个 容 顺 的 圆 形 渐变 效果 ( 径 向 渐变 的 直径 默认 为 容器 最 
长 边 k 








口 设置 为 40px 30px 会 生成 一 个 X 方 向 宽 为 40 像 素 、Y 方 向 高 为 30 像 素 的 椭圆 形 。 
a 设置 为 el11ipse 会 生成 和 容器 大 小 一 致 的 椭圆 形 。 

在 定义 了 形状 和 大 小 后 ,我 们 定义 渐变 的 位 置 。 默认 的 位 置 是 容器 的 中 心 。 但 是 我 们 可 以 尝 
试 一 下 其 他 做 法 。 
Dat top right 表 示 径 向 渐变 的 中 心 在 右上 方 。 
Oat right 100px top 20px 表 示 径 向 渐变 的 中 心 在 距 右 边框 100 像 素 、 上 边框 20 像 素 处 。 
Oat center 1eft 表 示 径 向 渐变 的 中 心 在 左边 框 中 间 处 。 


我 们 暂停 对 径 向 渐变 大 小 、 形 状 和 位 置 的 定义 。 接 下 来 定义 色 标 ， 其 使 用 方法 和 
linear-gradient 一 致 。 


总 结 一 下 ,在 第 一 个 逗号 前 设置 大 小 、 形 状 和 位 置 ， 然 后 设置 需要 的 色 标 (每 个 色 标 之 间 用 
逗号 分 隔 )。 



































6.3.3 ”为 响应 式 而 生 的 关键 字 
在 响应 式 设计 中 , 你 会 发 现 按照 比例 设置 渐变 效果 大 小 比 按照 固定 像素 设置 更 为 有 用 。 你 会 
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发 现 无 论 元 素 的 大 小 如 何 改 变 , 都 能 够 被 你 的 渐变 效果 和 覆盖 住 。 男 外 ,你 还 可 以 使 用 一 些 方 便 的 
大 小 关键 词 ， 比 如 : 





background: radial-gradient(closest-side circle at center, #333, 
blue); 


下 面 了 解 一 下 这 些 关键 词 。 


O closest-side: 在 渐变 形状 为 圆 形 的 情况 下 ， 渐 变形 状 会 与 距离 中 心 最 近 的 边框 相 切 ; 
在 椭圆 形 的 情况 下 ， 则 会 与 距离 中 心 最 近 的 两 个 边框 相 切 。 

Q closest-corner: 渐变 形状 会 与 距离 中 心 最 近 的 角 相 切 。 

O farthest-side: 和 closest-siqe 相 反 。 在 圆 形 的 情况 下 , 与 距离 中 心 最 远 的 边 相 切 。 
在 椭圆 的 情况 下 ， 与 距离 中 心 最 远 的 两 边 相 切 。 

O farthest-corner: 渐变 形状 会 与 距离 中 心 最 远 的 角 相 切 。 

口 cover: 等 价 于 farthest-corner。 

口 contain: 等 价 于 closest-side。 























想 要 了 解 W3C 对 径 向 渐变 背景 的 标准 定义 ， 请 参阅 https:/www.w3.org/TR/css3-images/。 
制作 完美 渐变 效果 的 简便 方法 


手动 制作 渐变 效果 是 比较 困难 的 。 你 可 以 使 用 线 上 的 渐变 效果 生成 器 。 我 

M 最 喜欢 的 是 http:/www.colorzilla.com/gradient-editor/。 它 使 用 一 个 图 形 化 界面 编 
辑 器 来 方便 用 户 选 择 颜 色 、 色 标 位 置 、 渐 变形 式 ( 线性 或 者 径 向 渐变 )， 甚 至 包 
括 最 后 生成 的 色 值 的 表示 方法 (HEX、RGB(A)、HSL(A) )。 它 也 预 置 了 一 些 渐 

变 效 果 让 你 进一步 调节 。 它 还 提供 可 以 兼容 老式 浏览 器 的 代码 。 仍 然 不 够 方便 

吗 ? 那么 尝试 一 下 基于 图 片 生 成 CSS 渐 变 效 果 功 能 ? 我 觉得 它 能 满足 你 的 需求 。 
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CSS3 也 可 以 让 我 们 创建 重复 渐变 背景 效果 。 让 我 们 看 一 下 如 何 实现 : 





.repeating-radial-gradient ( 

background: repeating-radial-gradient(black 0px, orange 5px, red 
10px); 
} 


这 就 是 它 的 效果 ( 不 要 采 着 看 太 久 ， 可 能 会 引发 恶心 ): 
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首先 ， 在 linear-gradient 或 者 radial-gradient 前 添加 repeagting 前 经， 接 下 来 的 语法 
和 普通 的 渐变 效果 是 一 致 的 。 在 本 例 中 ， 我 使 用 了 像素 值 来 标记 色 标 之 间 的 距离 ( 分别 是 0px、 
5px 和 10px )。 你 也 可 以 使 用 百 分 值 进行 标记 。 为 了 展示 最 佳 效果 ， 建 议 使 用 同一 种 计量 单位 。 











想 要 了 解 W3C 对 重复 渐变 的 标准 定义 ， 请 参阅 https:/www.wW3.org/TR/css3- 


images/。 


另外 ， 我 还 有 一 种 使 用 渐变 背景 效果 的 方法 要 分 享 给 你 。 


6.5 ”使 用 渐变 背景 创造 图 案 


在 设计 中 ,我 经 常 使 用 线性 渐变 ,很 少 使 用 径 向 渐变 和 重复 渐变 。 然而， 有 些 聪 明 的 人 已 经 
学 会 使 用 渐变 来 创造 背景 渐变 图 案 了 。 让 我 们 欣赏 一 下 来 自 CSS 高 手 Lea Verous 的 CSS3 背 景 图 案 
集合 ， 你 可 以 通过 http://lea.verou.me/css3patterns/ 观 看 : 











.carbon-fibre ( 
margin: lrem; 
width: 400px; 
height: 200px; 
background: 
radial-gradient 
radial-gradient 
radial-gradient 
radial-gradient 

9px; 
background-color:1282828; 
background-size:16px 16px; 


black 15$, transparent 162) 0 O0, 

black 15$, transparent 16$) 8px 8px, 
rgba(255,255,255,.1) 15$, transparent 20$) O0 1px, 
rgba(255,255,255,.1) 15$, transparent 20$) 8px 


} 
下 图 是 在 浏览 器 中 carbon-fibre 的 背景 效果 : 























只 需要 几 行 CSS3 代 码 ， 我 们 就 拥有 了 易于 修改 的 、 响 应 式 的 、 可 扩展 的 背景 图 案 。 


1 
> 你 可 能 会 发 现 ， 添 加 background-repeat :no-repeat 可 便于 了 解 它 的 工 
作 原 理 。 














与 以 往 一 样 , 我 们 可 以 依靠 媒体 查询 来 在 不 同 的 响应 式 场景 中 使 用 不 同 的 效果 。 例 如 , 一 个 
渐变 图 案 可 能 在 小 视 口 中 比较 好 看 ,但 是 在 视 口 较 大 的 情况 下 ,使 用 一 个 纯色 的 背景 会 比较 好 : 


@media (min-width: 45rem) { 
.carbon-fibre ( 
background: #333; 
} 
} 


你 可 以 查看 example 06-05, 
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虽然 现在 可 能 有 点 过 时 了 , 但 是 过 去 曾 十 分 流行 在 页 面 项 部 和 底部 使 用 不 同 的 背景 图 片 , 或 
者 在 页 面 某 个 内 容 区 的 项 部 和 底部 使 用 不 同 的 背景 图 片 。 在 使 用 CSS2.1 的 年 代 , 要 实现 这 种 效果 
通常 需要 使 用 额外 的 标记 ( 为 页 头 背 景 和 页 脚背 景 各 设置 一 个 元 素 )。 


在 CSS3 中 ， 你 可 以 在 一 个 元 素 上 堆 炙 多 个 背景 图 片 。 



























































下 面 是 语法 : 
-bg ( 
background: 
url('../img/1.png'), 
url('../img/2.png'), 


url('../img/3.png'); 
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和 多 重 阴影 的 堆 受 顺序 一 样 ,图片 列表 中 先 出 现 的 图 片 会 被 安置 在 越 靠 近 用 户 的 位 置 。 你 其 
至 可 以 在 同一 个 声明 中 添加 背景 颜色 : 





-bg ( 
background: 
url('../img/1.png'), 
url('../img/2.png'), 
url('../img/3.png') left bottom, black; 


在 最 后 才 设 定 背 景 颜色 ， 这 样 颜色 就 会 在 所 有 图 像 的 下 方 。 


M 当 声 明 多 个 背景 元 素 的 时 候 ， 你 不 需要 每 行 只 写 一 个 图 片 。 我 只 是 觉得 这 
样 的 代码 方便 阅读 而 已 。 





:支持 多 重 背景 的 浏览 器 ( 如 IE8 及 之 前 的 版 本 ) 会 忽略 这 条 声明 ， 所 以 你 最 好 在 使 用 多 重 
背景 前 声明 一 个 “正常 ”的 背景 属性 来 兼容 老 昌 浏览 器 。 

使 用 多 重 背景 的 时 候 ， 如果 你 使 用 透明 背景 的 PNG 图 片 , 下层 图 片 将 会 透 过 上 层 图 片 的 透明 
背景 显示 出 来 。 但 是 背景 图 片 并 不 总 是 要 一 个 接 一 个 堆 重 在 一 起 ， 也 并 不 总 是 要 大 小 相同 。 









































6.6.1 背景 大 小 
可 以 使 用 背景 大 小 (background-size) 属性 为 每 个 图 片 设置 大 小 。 语 法 如 下 : 


-bg ( 
background-size: 100% 50%, 300px 400px, auto; 











} 


每 张 图 片 的 大 小 (第 一 个 是 宽度 , 第 二 个 是 高 度 ) 按照 它们 在 背景 属性 中 的 顺序 声明 ， 用 过 
号 分 隔 。 在 上 例 中 ， 你 可 以 使 用 百分比 、 像 素 或 者 以 下 关键 词 。 
O auto: 让 图 片 保 持 其 原生 大 小 。 


O cover: 保持 图 片 比例 ， 拓 展 至 覆盖 整个 元 素 。 
O contain: 保持 图 片 比例 ， 拓 展 图 片 让 其 最 长 边 保 持 在 元 素 内 部 。 





















































6.6.2 ”背景 位 置 


如 果 你 有 不 同 的 背景 图 片 、 不 同 的 大 小 ， 接 下 来 要 做 的 就 是 放置 在 不 同 的 位 置 上 了 。 那 么 
background-position 就 可 以 满足 你 的 需求 了 。 


让 我 们 把 所 有 的 图 片 功 能 以 及 前 几 童 介绍 的 几 个 响应 式 单位 结合 起 来 。 
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让 我 们 用 一 个 简单 的 元 素 和 三 张 背 景 图 片 创 建 一 个 简单 的 太空 场景 。 图 片 设置 为 不 同 的 大 
小 ， 并 使 用 三 种 不 同 的 方式 来 放置 。 


.bg-multi ( 
height: 100vh; 
width: 100vw; 
background: 
url('rosetta.png'), 
url('moon.png'), 
url('stars.jpg'); 
background-size: 75vmax, 50vw, cover; 
background-position: top 50px right 80px, 40px 40px, top center; 
background-repeat: no-repeat; 




















) 
MRENA si EGET BU P ETR RAR : 














我 们 把 星空 图 放 在 底层 ， 然 后 放置 月 亮 图 ,最 后 放 和 人 一 张罗 寨 塔 空间 探测 融 图 片 。 你 可 以 在 
example 06-06 中 查看 。 要 注意 的 是 ， 如 果 你 调整 浏览 器 窗口 大 小 ， 会 发 现 啊 应 式 长 度 单位 工作 
得 很 好 (vmax、vh 和 vw ) 并 且 能 保持 比例 ， 而 基于 像素 的 单位 却 不 一 样 。 


[ 背景 位 置 默认 为 左上 角 。 ] 


6.6.3 ”背景 属性 的 缩写 


可 以 把 所 有 不 同 的 背景 属性 都 组 合 在 一 起 ， 写 在 一 个 属性 里 。 你 可 以 在 https:/www.w3.org/ 
TR/css3-background/ 阅 读 规范 。 不 过 到 目前 为 止 ， 我 的 经 验 告诉 我 ， 缩 写 经 常会 导致 很 多 奇 奇 怪 
怪 的 问题 。 因 此 ,我 建议 不 要 使 用 缩写 ， 并 且 先 声明 多 重 背 景 图 片 ， 然 后 声明 背景 大 小 ， 最 后 声 
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明 背 景 位 置 。 








想 要 了 解 W3C 对 多 重 背 景 的 标准 定义 ， 请 参阅 https://www.w3.org/TR/css3- 
一 background/。 


6.7 ”高 分 辨 率 背 景 图 像 
媒体 查询 让 我 们 可 以 在 不 同 的 视 口 大 小 下 加 载 不 同 分 辩 率 的 图 像 。 


下 倒是 一 段 为 “正常 ”和 高 清 屏幕 选择 不 同 分 辩 率 图 片 的 代码 。 你 可 以 在 example_06-07 中 
查看 : 


-bg ( 
background-image: url('bg.jpg'); 

















j 
Qmedia (min-resolution: 1.5dppx) ( 
-bg ( 
background-image: url('bgG1 5x.jpg'); 
j 
} 
媒体 查询 包括 长 度 、 高 度 或 者 其 他 支持 的 弧 形 。 在 本 例 中 ， 我 们 定义 图 片 bg@1_5x.jpg 应 该 
使 用 的 最 小 分 辨 率 为 1.5dppx( 设备 像素 与 CSS 像 素 比 ) 我们 也 可 以 使 用 dpi ( 每 英寸 点 数 ) 或 者 
dpcm (每 厘米 点 数 )。 然 而 ， 即 使 不 考虑 它们 的 支持 度 ， 我 认为 dppx 仍 然 是 最 易于 理解 的 单位 。 
2dppx 意 味 着 两 倍 的 分 辨 率 ，3dppx 则 意味 着 三 倍 分 辨 率 。 想 象 一 下 ， 如 果 你 使 用 的 是 dpi 会 是 多 
麻烦 的 一 件 事 。“ 标 准 ” 的 分 辨 率 应 该 是 96dpi， 那 么 两 倍 的 分 辨 率 就 应 该 是 192dpi。 


dppx 单 位 的 支持 度 并 不 算 特别 好 ( 你 可 以 通过 http://caniuse.com/ 来 查看 目标 浏览 器 的 支持 情 
况 )。 所 以 你 还 是 需要 编写 其 他 版 本 的 媒体 查询 方法 来 解决 分 辨 率 的 问题 , 或 者 依靠 工具 来 解决 。 




































































关于 性 能 
M Riitit K iy A H Ake T A 3 的 速度 ， 影响 用 户 的 体验 。 尽管 背景 图 片 并 
不 会 阻止 网 页 的 正常 阅读 (你 在 背景 图 片 正 常 加 载 的 时 候 仍然 可 以 阅读 网 页 的 


其 他 部 分 )， 但 是 它 会 使 你 的 页 面 变 重 ， 这 对 于 那些 要 为 流量 付费 的 用 户 十 分 不 
友好 。 
6.8 CSS 滤 镜 


box-shadow 有 一 个 显而易见 的 问题 。 顾 名 思 义 ， 元 素 的 阴影 只 能 是 矩形 。 下 面 是 利用 
box-shadqow 创 建 的 三 角形 阴影 (你 可 以 在 example 06-08 中 查看 代码 ): 
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然而 这 并 不 是 我 想 要 的 结果 。 好 在 ， 我 们 可 以 用 CSS 滤 镜 来 解决 这 个 问题 。CSS 滤 镜 是 Filter 
Effects Module Level 1 文档 中 的 一 部 分 (https://www.w3.org/TR/filter-effects/ )。 它 的 支持 度 并 没有 
box-shadow 那 么 高 ， 但 是 在 渐进 增强 的 方式 中 表现 依然 十 分 不 错 。 如 果 浏 览 器 不 支持 滤 镜 ， 那 
么 它 会 将 其 忽略 。 而 在 支持 滤 镜 的 浏览 器 上 ， 炫 丽 的 效果 就 会 被 泻 染 出 来 。 


这 是 上 图 中 的 元 素 在 使 用 arop-shadqow 滤 镜 替 代 box-shaaqow 后 的 效果 : 



































以 下 是 CSS 滤 镜 的 格式 : 


.filter-drop-shadow { 6 
filter: drop-shadow(8px 8px 6px 4333); 


) 


在 filtez 属 性 后 我 们 首先 要 声明 使 用 哪 种 滤 镜 。 本 例 中 我 们 选择 了 drop-shadow， 然 后 传 
入 滤 镜 所 需要 的 参数 。drop-shadow 和 pox-shadow 拥 有 相似 的 语法 ; X 方 向 偏 移 量 、Y 方 向 偏 
移 量 、 模 糊 大 小 、 阴 影 尺寸 (上述 两 个 值 都 是 可 选 的 ) 和 颜色 ( 同样 也 是 可 选 的 , 但 是 我 建议 为 
了 效果 的 一 臻 性， 定义 一 个 颜色 )。 


























M 
| Q CSS 滤 镜 是 基于 被 广泛 支持 的 SVG 滤 镜 ， 我 们 会 在 第 7 章 中 探讨 。 ] 


6.8.1 可 用 的 CSS 滤 镜 


可 供 我 们 选择 的 CSS 滤 镜 并 不 多 ， 下 面 我 们 将 逐个 介绍 。 虽 然 本 书 收录 了 大 部 分 滤 镜 的 图 像 
效果 ,但 是 由 于 印刷 效果 的 原因 ( 黑白 图 像 )， 读 者 会 难以 发 现 它 们 之 间 的 区 别 。 记 住 ， 你 可 以 
在 浏览 器 中 通过 打开 example_06-08 来 观察 它们 的 效果 。 我 会 尝试 为 每 一 个 效果 列 出 比较 合适 的 
值 。 显 而 易 见 的 是 ， 越 多 的 值 意味 着 越 多 的 滤 镜 被 添加 到 其 中 。 我 会 在 相关 代码 后 面 给 出 图 像 。 
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O filter: url ('./img/filters.svg&filterRed'): 首先 定义 一 个 SVG 滤 镑 来 使 用 。 
DQ filter:bilur (3px): 使 用 一 个 简单 的 长 度 值 (不 是 百分比 J5 























O filter:brightness(2): 使 用 从 0 到 1 的 值 或 者 从 0% 到 100% 的 值 。0/0% 意 味 着 全 黑 ， 
1/100% 意 味 着 正常 没有 变化 ， 而 任何 更 高 的 值 意味 着 更 高 的 亮度 。 











brightness(2) 














O filter:contrast(2): 使 用 从 0 到 1 的 值 或 者 从 0% 到 100% 的 值 。0/0% 意 味 着 全 黑 ， 
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1/100% 意 味 着 正常 没有 变化 ， 而 更 高 的 值 意味 着 更 高 的 对 比 度 。 

















D filter:drop-shadow(4px 4px 6px 4333): 先前 提 到 过 。 
口 filter:grayscale(.8): 使 用 从 0 到 1 或 者 从 0% 到 100% 的 值 来 表示 元 素 灰 度 化 的 程度 。 
0 表示 没有 灰 度 化 ， 而 1 表示 完全 灰 度 化 。 





























O filter:hue-rotate(25deg): 使 用 从 0 度 到 360 度 表示 颜色 在 色 轮 上 的 变化 角度 。 
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O filter:invert (75%): 使 用 从 0 到 1 的 值 或 者 从 0% 到 100% 表 示 元 素 中 反 色 的 程度 。 





invert(7596) 











a tM cS. x a = 一 BY AE 


O filter:opacity(502): 使 用 从 0 到 1 的 值 或 者 从 0% 到 100% 的 值 来 改变 元 素 的 透明 度 。 
这 和 你 熟悉 的 opacity 属 性 是 相似 的 。 然 而 滤 镜 是 可 以 多 个 同时 使 用 的 ， 这 让 透明 效果 
可 以 和 其 他 滤 镜 效果 结合 在 一 起 。 
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O filter:saturate(152): 使 用 从 0 到 1 的 值 或 者 从 0% 到 100% 来 表示 图 像 的 饱和 度 。 高 
于 1/100% 的 值 会 增加 额外 的 饱和 度 。 




















Q filter:sepia(.74): 使 用 从 0 到 1 的 值 或 者 从 0% 到 100% 来 为 元 素 添加 褐色 滤 镜 。0/0% 
表示 元 素 没有 变化 ， 而 更 高 的 值 则 表示 褐色 化 程度 的 提升 ，1/100% 表 示 最 高 的 效果 。 
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6.82 ”使 用 多 个 CSS 滤 镜 


你 可 以 轻松 地 使 用 多 个 滤 镜 : 用 空格 分 隔 它们 即 可 。 如 下 例 ， 你 就 可 以 同时 使 用 opacity、 
blur 和 sepia 滤 镜 : 


.MultipleFilters ( 
filter: opacity(10$) blur(2px) sepia(352$); 
} 


Rd: 除了 hue_rotate 滤 镜 外 ， 都 不 能 使 用 负 值 。 

CSS 滤 镜 在 给 我 们 带 来 炫丽 强力 效果 的 同时 ， 也 可 以 让 我 们 可 以 切换 各 种 效果 。 我 们 会 在 第 
8 章 中 探讨 。 

然而 ， 在 你 为 这 些 新 功能 痴迷 的 时 候 ， 我 希望 你 可 以 先 考虑 一 下 性 能 问题 。 


6.9 CSS 性 能 的 警告 
当 提 到 CSS 性 能 的 时 候 ， 我 希望 你 记 住 这 么 一 句 话 : 
“括号 外 的 决定 了 页 面 的 架构 ， 括 号 内 的 决定 了 页 面 的 性 能 
证 我 拓展 一 下 我 这 句 小 小 的 格言 。 








Ben Frain 
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就 我 目前 所 能 证 明 的 ， 担 心 CSS 选 择 器 (大 括号 外 面 的 部 分 ) 的 性 能 表现 是 无 意义 的 。 你 可 
以 在 http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/ 上 查看 我 的 证 明 。 


然而 ,CSS 中 某 个 部 分 真 的 会 让 页 面 慢 下 来 ,就 是 那些 聪明 的 、“ 昂 贵 的 ”CSS 属 性 ( 大 括号 
内 的 部 分 ) 当 我 们 使 用 “昂贵 的 ”这 一 形容 词 ， 也 就 意味 值 它 给 浏览 器 带 来 了 极 高 的 负荷 。 这 
是 浏览 带 讨 厌 做 的 繁重 活 儿 。 


我 们 很 容易 猜 到 是 什么 给 浏览 器 带 来 了 额外 的 工作 量 , 就 是 那些 在 泻 染 前 必须 进行 的 计算 工 
作 。 举 个 例子 ， 一 个 是 只 有 单一 背景 颜色 的 标准 div 容 器 ， 另 外 一 个 则 是 在 多 种 渐变 背景 上 受 加 
的 一 幅 半 透明 的 图 像 ， 并 且 该 容器 是 圆 角 的 ， 而 且 添 加 了 drop-shadow 滤 镜 。 后 者 必然 更 加 昂 
贵 。 它 会 给 浏览 带 带 来 更 多 计算 性 的 工作 ， 因 此 会 导致 更 多 的 开销 。 


因此 , 慎重 地 使 用 滤 镜 效果 。 如 果 可 以 , 在 你 需要 支持 的 最 低级 设备 上 测试 一 下 页 面 速度 是 
否 受到 了 影响 。 至 少 要 在 开发 者 工具 上 进行 检测 , 去 掉 连 续 的 页 面 重 绘 等 你 认为 可 能 引起 问题 的 
现象 。 你 也 可 以 从 数据 中 (如 需要 花费 多 少 训 秒 才能 泻 染 当前 的 页 面 ) 判断 出 哪 种 效果 才 是 最 有 
效 的 。 这 个 数字 越 低 ， 页 面 的 效率 越 高 ( 不 过 要 注意 浏览 器 /平台 间 的 差异 性 ， 因 此 ， 最 好 在 真 
实 设 备 上 进行 测试 )。 

要 了 解 更 多 ， 我 推荐 以 下 资源 : https://developers.google.com/web/fundamentals/performance/ 


rendering/。 



















































































CSS 谈 旱 和 剪裁 的 注意 事项 
随 着 CSS Masking Module Level 1 的 到 来 , 在 不 久 的 将 来 , CSS 就 可 以 提供 庶 墨 和 剪裁 功能 
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这 些 功能 让 我 们 可 以 把 图 片 前 成 任意 形状 〈 通 过 SVG 或 者 一 系列 多 边 形 的 点 来 指定 )。 尽 管 该 规 
范 正 处 于 CR 阶段 ， 但 在 我 编写 本 书 的 时 候 ， 浏 览 器 的 实现 实在 太 笨重 ， 所 以 我 不 作 推荐 。 不 过 
在 你 阅读 此 书 的 时 候 ， 浏 览 器 的 实现 很 有 可 能 已 经 十 分 可 靠 了 。 为 了 方面 查阅 ， 我 推荐 你 在 
https:/www.w3.org/TR/css-masking-1/ 上 阅读 相关 规范 。 


同时 我 认为 Chris Coyier 在 他 的 文章 里 很 好 地 解释 了 有 哪些 属性 已 经 被 很 好 地 实现 了 。 大 家 可 
以 到 https://css-tricks.com/clipping-masking-css/ 上 进行 阅读 。 




















最 后 ， 可 以 在 http://alistapart.com/article/css-shapes-101 上 阅读 Sara Soueidan 的 文章 , 来 了 解 将 
来 我 们 可 以 使 用 什么 。 











6.10 ”小 结 


在 本 章 中 , 我 们 了 解 到 了 一 系列 用 于 设计 轻巧 美观 的 响应 式 页 面 的 CSS 功 能 。 CSS3 的 背景 } 
变 功 能 使 我 们 减少 了 对 背景 图 片 的 依赖 。 我 们 甚至 可 以 用 它 来 创建 无 限 重复 的 背景 图 案 。 我 们 还 
学 会 了 如 何 用 text -shadows 来 创建 简单 的 文本 增强 效果 ,以 及 如 何 使 用 box-shadown 来 为 元 素 
加 上 内 阴影 和 外 阴影 。 我 们 也 了 解 了 CSS 滤 镜 。 它 们 使 我 们 只 依靠 CSS 就 能 实现 令 人 惊奇 的 视觉 
效果 ,并且 可 以 结合 起 来 同时 使 用 。 


在 下 一 章 , 我 们 将 注意 力 转向 SVG。 尽 管 它 已 经 是 一 项 十 分 成 熟 的 技术 , 但 是 只 有 在 今天 的 
高 性 能 和 响应 式 网 站 里 ， 才 能 大 展 拳 脚 。 




















SVG 与 啊 应 式 Web 设 计 








这 本 书 已 经 、 正 在 而 且 会 继续 提 到 SVG (Scalable Vector Graphics， 可 伸缩 矢量 图 )。SVG 
是 响应 式 设计 中 十 分 重要 的 一 项 技术 。 它 是 一 种 不 会 过 时 的 、 能 够 轻松 解决 多 屏幕 分 状 率 问题 
的 技术 。 

Web 领 域 中 的 图 像 ， 如 JPEG 、GIF 或 者 PNG， 都 是 把 它们 的 可 视 数 据 保存 为 像素 形式 。 如 果 
你 将 以 这 种 形式 保存 的 图 像 放 大 到 两 倍 宽 高 以 上 ， 它 的 局 限 性 很 快 就 会 暴露 出 来 。 

下 面 是 一 幅 相 关 的 截图 。 我 在 浏览 需 上 放大 了 一 幅 PNG 图 像 : 
































你 是 否 可 以 看 出 很 明显 的 像素 化 呢 ?” 下 面 是 同一 幅 图 片 , 但 是 保存 为 SVG 格式 , 我 们 放大 到 
相同 的 大 小 : 









































差别 是 显而易见 的 。 
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除了 最 小 的 图 片 资 源 ， 如 果 可 能 的 话 ， 使 用 SVG 替代 JPEG 、GIF 或 者 PNG。 这 样 可 以 产生 和 
分 辨 率 无 关 的 图 片 ， 而 且 大 小 也 比 位 图 图 像 小 得 多 。 


本 章 会 涉及 SVG 的 诸多 方面 , 但 重点 是 如 何 将 其 集成 到 你 的 工作 流 中 , 同时 也 将 概述 SVG 的 


用 途 。 
本 章 内 容 : 


O SVG 的 简 史 和 基本 SVG 文 档 的 剖析 

口 使 用 流行 的 图 像 编 辑 软 件 和 服务 创建 SVG 
a 使 用 img 和 object 标 签 在 页 面 中 插入 SVG 
a 把 SVG 用 作 背 景 图 像 

a 把 SVG 直接 内 联 到 HTML 文 档 中 

口 复 用 SVG 符号 

a 引入 外 部 SVG 符号 

D 在 各 种 插入 方法 中 可 以 使 用 的 功能 

O SVG 动 画 和 SMIL 

口 使 用 外 部 样式 表 来 为 SVG 添加 样式 

a 使 用 内 部 样式 为 SVG 添加 样式 

O 使 用 CSS 修 改 SVG 并 为 其 添加 动画 效果 

口 媒体 查询 和 SVG 

口 优化 SVG 

O 使 用 SVG 来 为 CSS 定 义 滤 镜 

口 使 用 JavaScript 和 JavaScript 库 来 操纵 SVG 
口 实现 技巧 

口 更 多 资源 


SVG 是 一 个 十 分 庞大 的 主题 。 因 此 本 章 中 你 需要 关心 的 部 分 取决 于 你 对 SVG 的 需求 。 但 愿 我 
下 面 提供 的 导读 能 给 你 带 来 帮助 。 


如 果 你 只 是 为 了 更 清晰 的 图 像 和 更 小 的 文件 大 小 , 而 想 用 SVG 代替 网 站 中 的 静态 资源 , RHE 
荐 你 阅读 7.4.1 节 和 7.4.3 节 。 


如 果 你 想 知道 有 哪些 应 用 和 服务 可 以 帮 你 生成 和 管理 SVG 资源 ， 请 跳 至 7.3 节 ， 那 里 有 一 些 
对 你 有 用 的 链接 。 


如 果 你 想 全 面 地 了 解 SVG, 从 而 操纵 它 , 或 者 为 其 添加 动画 , 那么 你 最 好 选 一 个 舒服 的 姿势 ， 
并 且 备 好 大 份 的 饮料 ， 因 为 这 需要 花费 你 大 量 时 间 。 


在 开始 SVG 旅程 前 ， 让 我 们 先 回 到 2001 年 。 
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7.1 SVG 的 历史 


SVG 的 第 一 个 版 本 是 在 2001 年 推出 的 。 你 没有 上 听 错 ，SVG 在 2001 年 就 诞 和 后 了。 尽管 它 一 直 在 
发 展 ， 但 是 直到 高 分 辩 率 设备 的 出 现 才 被 广泛 注意 和 采用 。 下 面 是 1.1 规 范 中 对 SVG 的 介绍 
( https://www.w3.org/TR/SVG1 l/intro.html ): 

















“SVG 是 XMLI[IXML1.0] 中 用 于 描述 二 维 图 形 的 语言 。SVG 支 持 三 种 图 形 对 象 : 矢量 
图 形 形 状 (例如 由 直线 和 曲线 组 成 的 路 径 ) 、 图 像 和 文本 。” 


顾名思义 ，SVG 人 允许 在 代码 中 使 用 矢量 点 来 描述 二 维 图 像 。 这 种 优势 使 SVG 被 广泛 应 用 到 图 
标 、 线 条 图 和 图 表 的 表示 中 。 

因为 矢量 图 是 使 用 相对 点 来 保存 数据 的 ,所 以 可 以 缩放 到 任意 大 小 而 不 会 损失 清晰 度 。 此 外 ， 
由 于 SVG 仅仅 保存 矢量 点 ， 相 比 于 同等 尺寸 的 JPEG、GIF 和 PNG ， 其 文件 大 小 更 小 。 


SVG 现在 的 浏览 器 支持 度 也 相当 不 错 ，Android 2.3 以 上 和 IE9 以 上 都 支持 (http:/caniuse.comy 


#search=svg )。 














7.2 用 文档 表示 的 图 像 
通常 情况 下 ， 如 果 你 在 文本 编辑 器 里 查看 图 像 文件 的 代码 ， 会 不 知 所 云 。 


而 SVG 不 同 , 它 是 使 用 标记 式 语 言 进 行 描 述 的 。SVG 使 用 XML ( eXtensible Markup Language, 
可 拓展 标记 语言 ) 来 描述 ，XML 是 一 种 和 HTML 十 分 相似 的 语言 。 现 今 ，XML 在 互联 网 上 遍布 
各 地 。 你 使 用 过 RSS 阅 读 器 吗 ? 它 就 是 基于 XML 的 。XML 是 包装 RSS 内 容 的 语言 ， 从 而 让 它 便于 
被 多 种 工具 和 服务 使 用 。 


所 以 不 仅 机 器 可 以 阅读 和 理解 SVG 图 像 ， 我 们 也 可 以 。 
让 我 举 个 例子 。 下 面 是 一 幅 星星 的 图 片 : 
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这 是 一 张 SVG 图 像 , 在 example_ 07-01 中 被 命名 为 Starsvg。 如 果 你 在 浏览 器 中 打开 这 个 文件 ， 
可 以 看 到 一 个 星星 ; 如果 你 在 文本 编辑 器 里 打开 ， 会 看 到 生成 它 的 代码 。 

















<?xml version-"1.0" encoding-"UTF-8" standalone-"no"?» 
«svg width-"198px" height-"188px" viewBox-"0 0 198 188" version-"1.1" 
xmlns-"http://www.w3.org/2000/svg" xmlns:xlink-"http://www. 
w3.org/1999/xlink" xmlns:sketch-"http://www.bohemiancoding.com/sketch/ 
ns" 

<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding. 
com/sketch --> 

«title»Star 1«/title» 

«desc»Created with Sketch.«/desc» 

«defs»«/defs» 

«g id-"Page-1" stroke-"none" stroke-width-"1" fill-"none" fillrule-" 
evenodd" sketch:type-"MSPage"'- 

«polygon id-"Star-1" stroke-"14979797" stroke-width-"3" 
fill-"4F8E81C" sketch:type-"MSShapeGroup" points-"99 154 40.2214748 
184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 
63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 
119.45085 157.778525 184.901699 "></polygon> 

«/g» 
</svg> 


这 就 是 用 于 生成 星星 SVG 图 片 所 需 的 全 部 代码 。 

通常 来 说 ， 如 果 你 从 未 看 过 SVG 代 码 , 会 好 奇 为 什么 我 需要 看 这 些 代码 。 诚 然 ， 如 果 你 只 是 
想 在 Web 页 面 上 显示 这 些 矢 量 图 像 ， 你 当然 不 需要 查看 代码 。 只 要 找 一 个 图 形 应 用 ,将 你 的 矢量 
图 像 保 存 为 SVG 格式 就 大 功 告 成 了 。 我 们 会 在 接 下 来 列举 这 些 应 用 。 

尽管 大 部 分 情况 下 我 们 只 会 用 图 像 编辑 器 来 编辑 SVG , 但 是 明白 SVG 是 如 何 构成 的 以 及 如 何 
调整 它 还 是 十 分 有 用 的 ， 特 别 是 你 要 控制 它 或 者 给 它 加 上 动画 效果 的 时 候 。 


所 以 ,让 我 们 好 好 研究 一 下 SVG 的 标记 语言 ,并且 了 人 解 到 底 发 生 了 什么 。 我 希望 你 能 注意 到 
以 下 几 个 关键 点 。 



























































7.2.1 SVG 的 根 元 素 


SVG 的 根 元 素 有 width、heignt 和 viewbox 属 性 。 





«svg width-"198px" height-"188px" viewBox-"0 0 198 188" 
这 三 个 属性 在 SVG 展示 的 时 候 都 起 到 了 十 分 重要 的 作用 。 


希望 现在 你 能 很 好 地 理解 “ 视 口 ”这 个 概念 。 在 本 书 众多 章节 中 它 都 用 于 描述 在 设备 上 能 够 
观看 内 容 的 面积 。 举 个 例子 ,一 部 手机 的 视 口 可 能 只 有 320 像 素 宽 480 像 素 高 ， 而 桌面 电脑 则 一 般 
有 1920 像 素 宽 1080 像 素 高 。 


宽度 和 高 度 属性 对 于 创造 一 个 视 口 十 分 有 用 。 透 过 这 个 定义 的 视 口 , 我 们 可 以 看 到 内 部 定义 
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的 SVG 形 状 。 和 普通 的 Web 页 面 一 样 ，SVG 的 内 容 可 能 会 比 视 口 大 , 但 是 这 不 意味 着 多 余 的 部 分 
就 不 存在 ， 只 是 我 们 看 不 到 而 已 。 


而 另 一 方面 ， 视 框 (viewbox ) 则 定义 了 SVG 中 所 有 形状 都 需要 遵循 的 坐标 系 。 


你 可 以 把 视 框 值 0 0 198 198 视 为 对 和 矩形 左上 角 和 右 下 角 的 描述 。 前 两 个 值 被 称 为 min-x 
和 min-y， 用 于 描述 左上 角 的 位 置 。 而 接 下 来 的 两 个 值 被 称 作 宽 度 和 高 度 ， 可 以 描述 右 下 角 的 位 
置 。 





























因此 viewbox 属 性 可 以 让 你 缩放 图 片 。 例 如 ， 你 可 以 这 么 设置 viewbox 属 性 : 














«svg width-"198px" height-"188px" viewBox-"0 0 99 94" 


那么 其 中 的 形状 为 了 填 满 SVG 的 宽度 和 高 度 ， 就 会 被 放大 。 


M 为 了 真正 地 明白 视 框 和 SVG 坐标 系统 以 及 它们 带 来 的 机 会 ， 我 建议 你 阅读 
Sara Soueidan 的 文章 : https://sarasoueidan.com/blog/svg-coordinate-systems/， 以 及 
Jakob Jenkov 的 文章 : http://tutorials.jenkov.com/svg/svg-viewport-view-box.html., 


7.2.2 命名 空间 


这 个 SVG 会 有 一 个 由 生成 它 的 图 形 编辑 程序 定义 的 命名 空间 ( xmlns 是 XML 命 名 空间 的 缩 
写 )。 




















xmlns:sketch-"http://www.bohemiancoding.com/sketch/ns" 


这 些 命名 空间 往往 只 是 在 生成 SVG 的 程序 中 使 用 , 所 以 在 Web 页 面 上 展示 SVG 的 时 候 它 们 并 
不 是 必需 的 。 因 此 在 优化 流程 中 ， 为 了 减 小 SVG 的 大 小 ， 通 常会 把 它们 去 掉 。 












































7.2.8. ”标题 和 描述 标签 
title 和 aesc 标 签 提 高 了 SVG 文档 的 可 读 性 。 


«title»Star 1«/title» 
«desc»Created with Sketch.«/desc» 


这 些 标签 可 以 用 来 在 图 像 不 可 见 的 情况 下 描述 图 像 的 内 容 。 然 而， 当 SVG 图 片 被 应 用 为 背景 
片 的 时 候 ， 可 以 去 除 这 些 标签 来 减 小 文件 大 小 。 





7.2.4 defs 标签 


在 我 们 的 示例 代码 里 有 一 个 空 的 defs 标 签 : 





140 第 7 章 SVG 与 响应 式 Web 设计 





«defs»«/defs» 


尽管 在 我 们 的 示例 中 它 是 空 的 , 这 仍然 是 一 个 十 分 重要 的 元 素 。 它 是 用 于 储存 所 有 可 以 复 用 
的 元 素 定义 的 地 方 ， 如 梯度 、 符 号 、 路 径 等 。 











7.25 元 素 g 


g 苑 素 能 把 其 他 元 素 拥 绑 在 一 起 。 例 如 ， 你 要 画 一 辆 车 的 SVG ， 你 会 把 用 来 构成 车 轮 的 形状 
用 g 标 签 集合 起 来 。 























«g id-"Page-1" stroke-"none" stroke-width-"1" fill-"none" fillrule-" 
evenodd" sketch:type-"MSPage"'- 


在 g 标 签 中 我 们 可 以 看 到 先前 的 命名 空间 。 这 会 有 助 于 图 形 编辑 软件 再 次 打开 这 个 图 像 ， 但 
是 它 对 于 这 个 图 片 在 其 他 地 方 展示 并 没有 影响 。 





7.26 SVG 形状 元 素 
在 本 例 中 最 里 面 的 节点 是 一 个 多 边 形 (polygon) 





«polygon id-"Star-1" stroke-"4979797" stroke-width-"3" fill-"4F8E81C" 
Sketch:type-"MSShapeGroup" points-"99 154 40.2214748 184.901699 
51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 

4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 
157.778525 184.901699 "></polygon> 


SVG 拥有 一 系列 可 用 的 现成 形状 (path, rect, circle, ellipse, line, polyline, 
polygon )。 





7.2.7 SVG 路 径 


SVG 路 径 和 其 他 SVG 形状 有 所 区 别 ,因为 它们 是 由 任意 数量 的 连接 点 组 成 的 ( 允许 你 自由 创 
造 你 想 要 的 形状 )。 

这 就 是 SVG 文件 的 价值 所 在 。 和 希望 你 对 它 有 了 更 高 层次 的 理解 。 虽 然 有 些 人 喜欢 手写 SVG 的 
代码 ， 但 是 更 多 人 喜欢 利用 图 像 工 具 来 生成 SVG。 下 面 让 我 们 看 看 有 什么 流行 的 选择 。 














7.3 ”使 用 流行 的 图 像 编 辑 工具 和 服务 创建 SVG 


尽管 SVG 可 以 使 用 文本 编辑 器 编辑 , 但 是 仍然 有 大 量 提 供 了 GUI ( graphical user interface， 
形 用 户 界 面 ) 的 编辑 程序 。 如 果 你 拥有 图 像 编 辑 背 景 ， 会 发 现 使 用 这 些 软件 会 让 你 的 工作 轻松 很 
多 。 或 许 最 好 的 选择 是 Adobe 公 司 的 Ilustrator (PC/Mac )。 然 而 ， 对 于 普通 用 户 来 说 ，AI 还 是 有 
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点 昂贵 ， 所 以 我 推荐 Bohemian Coding 的 Sketch ( 只 有 Mac 版 : http://www.sketchapp.com/ )。 它 的 
售 价 也 不 便宜 ( 现在 售 价 是 99 美 元 )， 但 是 如 果 你 使 用 的 是 Mac 的 话 ， 我 推荐 你 考虑 它 。 


如 果 你 用 的 是 Windows/Linux 或 者 想 要 一 个 更 便宜 的 软件 ， 你 可 以 考虑 一 下 免费 的 开源 软件 
Inkscape ( https://inkscape.org/en/ )。 它 绝对 不 是 最 好 的 工具 ， 但 它 是 十 分 强大 的 (如 果 你 需要 证 
明 ， 可 以 到 https://inkscape.org/en/gallery/ 上 观看 Inkscape 的 作品 展示 )。 






































最 后 , 还 有 些 在 线 的 编辑 器 。Google 有 SVG-edit ( http://svg-edit.googlecode.com/svn/branches/ 
stable/editor/svg-editor.html )。 还 有 Draw SVG ( http://www.drawsvg.org/ ) 和 Method Draw， 后 者 被 
认为 是 SVG-edit 更 好 看 的 分 支 (http:/editormethod.ac/ )。 























利用 SVG 图 标 服务 

上 面 提 到 的 程序 给 予 了 你 从 头 开始 创建 SVG 图 像 的 能 力 。 然 而 ， 如 果 你 只 是 想 找 一 些 图 标 ， 
可 以 通过 从 在 线 图 标 服 务 下 载 SVG 版 本 的 图 标 来 节省 大 量 的 时 间 ( 对 于 我 来 说 , 是 为 了 获得 更 好 
看 的 图 标 )。 我 个 人 最 爱 的 是 https://icomoon.io/。 

为 了 快速 说 明 在 线 图 标 服 务 的 好 处 ， 打 开 icomoon.io， 你 会 看 到 一 个 可 以 供 你 搜索 的 图 标 库 
( 部 分 免费 ， 部 分 收费 ): 
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选择 你 需要 的 图 标 ， 然 后 下 载 。 生 成 的 文件 会 包括 SVG 、PNG 和 在 aefs 元 素 中 使 用 的 SVG 
符号 ( 记 住 qefs 元 素 是 引用 元 素 的 容器 )。 


你 可 以 打开 example 07-02 来 看 我 从 https://icomoon.io/ 下 载 的 包括 我 选择 的 五 个 图 标的 文件 。 
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7.4 在 Web 页 面 中 插入 SVG 


在 SVG 图 片上 ,你 可 以 做 很 多 ( 基于 浏览 右 的 ) 你 在 普通 格式 图 片 (JPEG, GIF, PNG) 上 
做 不 到 的 事 。 至 于 你 能 做 什么 , 很 大 程度 取决 于 你 如 何 插 入 SVG。 所 以 在 考虑 到 底 能 用 SVG 做 什 
么 前 ， 我 们 先 了 解 一 下 插入 SVG 的 多 种 方法 。 











7.4.1 使 用 img 标签 


最 直接 的 插入 SVG 图 像 的 方式 就 是 你 将 图 像 插 入 到 HTML 文档 中 的 方式 。 我们 使 用 一 个 简单 
的 img 标 签 即 可 : 


«img src-"mySconeVector.svg" alt-"Amazing line art of a scone" /> 


这 种 情况 下 ，SVG 所 能 做 的 和 其 他 插入 的 图 片 差不多 。 没 什么 多 说 的 。 














7.4.2 ”使 用 object 标签 


object 标 签 是 W3C 推 荐 的 用 于 装载 非 HTML 内容 的 容器 ( nf DA TE httpsz//www.w3.org/ 
TR/html5/embedded-content-0.html 了 人 解 object 的 规范 )。 我 们 可 以 像 下 面 这 样 利用 它 插入 SVG: 








«object data-"img/svgfile.svg" type-"image/svg-«xml"- 

«span class-"fallback-info"»Your browser doesn't support SVG«/ 
Span» 
</object> 


data 和 type 属 性 其 实 只 有 一 个 是 必须 要 的 ,但 是 我 建议 都 添加 上 。data 属 性 是 你 链接 SVG 
资源 的 方式 ,type 属 性 描述 了 内 容 的 MIME 类 型 ,在 这 个 例子 中 , image/svg+xml 是 SVG 的 MIME 
类 型 ( 互联 网 媒体 类 型 )。 你 也 可 以 添加 wiath 和 height 属 性 ， 如 果 你 想 约束 这 个 容器 中 的 SVG 
的 大 小 。 


通过 object 标 签 插 和 人 到 页 面 的 SVG 可 以 被 JavaScript 访 问 ， 这 是 采用 这 种 插 和 人 方式 的 一 个 重 
要 理由 。 而 另 一 个 好 处 就 是 ，object 可 以 在 浏览 器 不 支持 引入 的 数据 类 型 的 情况 下 做 出 简单 的 
反馈 。 例 如 ， 如 果 上 述 的 object 标 签 在 IE8 (IE8 不 支持 SVG ) 中 被 打开 ， 它 会 显示 消息 “Your 
browser doesn't support SVG”。 你 可 以 使 用 这 个 空间 来 插入 一 个 img 标 签 来 引入 备用 的 图 像 。 然 而 
要 注意 的 是 ， 在 我 的 粗略 测试 中 ， 我 发 现 无 论 这 张 图 片 是 否 真 的 被 需要 ， 它 都 会 被 下 载 。 因 此 ， 
如 果 你 希望 你 的 网 站 加 载 速度 尽 可 能 快 〈 你 会 的 ， 相 信 我 )， 这 并 不 是 最 佳 选择 。 


































































































如 果 你 想 通过 jQuery 操作 通过 object 插 入 的 SVG， 需 要 使 用 JavaScript 原 生 
的 .contentDocument 属性 。 你 可 以 使 用 jQuery .atttr 来 改变 它 的 内 容 ， 如 
fills 
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另 一 种 后 备 方法 是 使 用 CSS 中 的 background-image。 例如 ， 在 上 例 中 , 我 们 可 以 给 后 备 的 
span 标 签 添加 类 . fallpack-info。 我 们 可 以 使 用 CSS 来 为 其 添加 合适 的 background-image。 
这 种 情况 下 ，background-iamge 只 会 在 需要 的 情况 下 才 加 载 。 





7.4.3 把 SVG 作为 背景 图 像 插入 


SVG 可 以 在 CSS 中 用 作 一 个 背景 图 像 ， 和 其 他 图 片 格式 (PNG, JPG, GIF) 一 样 。 引 入 SVG 
时 并 没有 什么 特别 之 处 : 
.item { 


background-image: url('image.svg'); 


} 

对 于 那些 不 支持 SVG 的 老 旧 版 本 的 浏览 器 , 你 可 能 想 引 入 一 个 支持 度 更 高 的 后 备 策略 (通常 
是 PNG )。 下 面 就 是 一 种 IE8 和 Android 2 上 的 后 备 方法 。IE8 不 支持 background-size 和 SVG, 而 
Android 2.3 不 支持 SVG 并 且 需 要 在 backgroundq-size 前 添加 前 绥 : 























.item ( 
background: urlí('image.png') no-repeat; 
background: url('image.svg') left top / auto auto no-repeat; 


} 


在 CSS 中 ， 当 两 个 相同 属性 都 被 应 用 的 时 候 ， 样 式 表 中 下 方 的 属性 总 会 覆盖 上 方 的 属性 。 在 
CSSF, 浏览 右 总 会 忽略 它 所 不 能 理解 的 那些 属性 / 值 对 。 因 此 ， 老 式 浏览 器 会 加 载 PNG， 因 为 它 
们 可 能 不 认识 SVG 或 者 不 能 理解 没有 添加 前 级 的 background-szie 属 性 。 而 现代 浏览 器 虽然 认 
识 两 个 写法 ,但 是 下 方 的 优先 级 更 高 。 

你 也 可 以 在 Modernizr 的 帮助 下 提供 后 备 策略 。Modernizr 是 一 款 JavaScript 的 浏览 器 功 能 检测 
工具 ( Modernizt 在 第 5 章 中 有 充分 的 介绍 )。Modernizr 对 于 不 同 的 SVG 插 入 方法 有 单独 的 测试 方 
ik, 并 且 可 能 在 下 一 个 版 本 (在 编写 本 书 的 时 候 还 没 发 布 ) 中 添加 对 于 CSS 中 的 SVG 的 检测 。 而 
现在 ， 你 可 以 这 么 做 : 


.item { 
background-image: url('image.png'); 





















































} 
.Svg .item ( 
background-image: url('image.svg'); 


) 
你 喜欢 的 话 ， 也 可 以 把 逻辑 反 转 : 


.item ( 
background-image: url('image.svg'); 














} 
.no-svg .item ( 
background-image: url('image.png'); 


} 
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当 功能 检测 被 充分 支持 后 ， 你 可 以 这 么 做 : 


.item ( 
background-image: url('image.png'); 


} 


Gsupports (fill: black) ( 
.item { 
background-image: url('image.svg'); 


} 


因为 fi11 是 一 个 SVG 属性 ， 所 以 如 果 浏 览 器 支持 SVG， 那 么 asupports 规 则 就 会 生效 ， 它 
就 会 使 用 下 面 的 语句 覆盖 第 一 条 设 定 。 


如 果 你 对 SVG 的 需求 主要 是 静态 背景 图 片 或 者 是 图 标 之 类 , 我 强烈 建议 通过 背景 图 像 的 方式 
插入 SVG 文 件 。 这 是 因为 我 们 有 一 堆 工具 可 以 自动 生成 图 片 精灵 和 样式 表 ( 意味 着 可 以 把 SVG 当 
作 data URI 引 入 )、 备用 的 PNG 资 源 和 你 创造 的 SVG 所 需要 的 样式 表 。 这 种 使 用 SVG 的 方式 支持 度 
不 错 ， 因 为 图 像 自身 的 缓存 效果 挺 好 ( 因此 性 能 表现 也 挺 好 )， 而 且 实 现 起 来 也 十 分 简单 。 





























7.4.4 关于 data URI 的 简短 介绍 


如 果 你 读 了 上 一 小 节 ， 可 能 会 好 奇 究 竟 什 么 是 data URI (Uniform Resource Identifier， 统 一 资 
源 标 识 符 )。 相 对 于 CSS 而 言 ， 这 是 用 来 引入 外 部 资源 的 ， 如 图 像 。 因 此 ， 我 们 既 可 以 这 样 引 入 
外 部 图 像 文件 : 


.external { 
background-image: url('Star.svg'); 




















} 
也 可 以 利用 data URI 引 入 图 片 : 


.data-uri ( 

background-image: url(data:image/svg-«xml,$3C$3Fxm1220 
version£$3D2221.0$22$20encoding2$3D222UTF-8222£20standalone£23D222 
n02$222$3F23E20A23Csvg$20width$3D222198px$222$20height£3D222188px- 
$22$20viewBox$3D2220$2002$201982201882222$20version$3D2221.12$22220 
xmlns$3D222http£$3A$2F$2Fwww.w3.org$2F20002$2Fsvg$222$20xmlns$3Axlink 
$3D$22http$3A$2F£2Fwww.w3.org$2F199922Fxlink$2220xmlns£$3Asketch£3 
D$22http$3A22F22Fwww.bohemiancoding.com$2Fsketch$2Fns$2223E$0A220 
$20$20$202$3C221--2$20Generator23A$20Sketch2203.2.2$20$289983$29220 
-$20http23A22F$2Fwww.bohemiancoding.com$2Fsketch$20--$3E$0A£220 
$20$20$20$3Ctitle$3EStar$2012$3C$2Ftitle£23E$0A2202202$20220 
$3Cdesc$3ECreated$20with$20Sketch.$3C$2Fdesc$3E0A$20$202$20$20- 
$3Cdefs$3E23C$2Fdefs$3E2$0A$202$20$20220$3Cg$20i82$3D$22Page-1$22220 
Stroke$3D$22none22£20stroke-width£3D2221$222$20fi1112$3D$22none£222220 
fill-rule3D$22evenodd222$20sketch3Atype£23D$22MSPage$2223E$ 
0A$20$202$202$20$202$20$202202$3Cpolygon$20id$3D$22Star-1$22220 
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stroke%3D%22%23979797%22%20stroke-width%3D%223%22%20 
fil1l1%3D%22%23F8E81C%22%20sketch%3Atype%3D%22MSShapeGroup%22%20 
points%3D%2299%20154%2040.2214748%20184.901699%2051.4471742%20 
119.45085%203.89434837%2073.0983006%2069.6107374%2063.5491503%2099%20 
4%20128.389263%2063.5491503%20194.105652%2073.0983006%20146.552826%20 
119.45085%20157.778525%20184.901699%20%22%3E%3C%2Fpolygon%3E%0A%20%20 
%20%20%3C%2F9J%3E%0A%3C%2Fsvg%3E); 

} 


它 并 不 好 看 ， 但 是 它 节 省 了 一 次 网 络 请 求 。data URI 有 不 同 的 编码 方式 ， 并 且 有 大 量 可 用 的 
工具 来 为 你 的 资源 创建 data URI. 


如 果 使 用 这 种 方式 对 SVG 进 行 编 码 ， 我 建议 不 要 采用 base64 编 码 ， 因 为 它 对 SVG 内 容 的 压缩 
并 不 如 text 好 。 







































































7.4.5 生成 图 像 精灵 


我 个 人 推荐 的 用 于 生成 图 像 精 灵 或 者 data URI 的 工具 是 Iconizr (http:/iconizr.com/ )。 它 让 你 
对 最 终生 成 的 SVG 文件 和 后 备 PNG 资 源 拥 有 完整 的 控制 权 。 它 可 以 生成 data URI 格 式 或 者 图 像 精 
灵 的 结果 。 如 果 你 选择 生成 图 像 精灵 的 话 , 它 甚至 还 会 引入 必要 的 JavaScript 片 段 来 确保 你 引入 正 
确 的 资源 。 强 烈 推 荐 这 个 工具 。 


另外 ， 你 可 能 想 知道 是 data URI 还 是 图 像 精灵 比较 适合 你 的 项 目 。 为 此 ， 我 做 了 进一步 的 调 
查 , 并 且 列 举 出 它们 各 自 的 优 缺点 。 因 此 , 当 你 面临 这 种 选择 的 时 候 , 可 以 访问 https://benfrain.com/ 


1mage-sprites-data-uris-icon-fonts-v-svgs/ 


尽管 我 很 喜欢 把 SVG 当 作 背景 图 像 插 入 ， 但 是 如 果 你 想 为 它 加 上 动画 效果 ， 或 者 使 用 
JavaScript 来 插入 数据 等 ， 那 么 最 好 的 选择 还 是 把 SVG 内 联 到 HTML 上 。 





















































7.5 内 联 SVG 


由 于 SVG 仅仅 是 一 个 XML 文档 ， 所 以 你 可 以 直接 将 它 插 和 人 到 HTML 中 。 比 如 : 


«div» 
«h3»Inserted 'inline':«/h3» 
«span class-"inlineSVG"- 
<svg id-"svgInline" width-"198" height-"188" viewBox-"0 0 
198 188" xmlns-"http://www.w3.org/2000/svg" xmlns:xlink-"http://www. 
w3.org/1999/xlink"'» 
«title»Star 1«/title» 
«g class-"star Wrapper" fill-"none" fill-rule-"evenodd"» 
«path id-"star Path" stroke-"4979797" strokewidth-" 
3" fill-"4F8E81C" d-"M99 1541-58.78 30.902 11.227-65.45L3.894 
73.097165.717-9.55L99 4129.39 59.55 65.716 9.548-47.553 46.353 11.226 
65.4522 /* 





146 第 7 章 SVG 与 响应 式 Web 设计 





«/g» 
«/Svg» 
</span> 
</div> 


并 不 需要 包装 什么 特别 的 元 素 ， 你 只 需要 直接 在 HTML 标 记 内 搬入 SVG 标记 即 可 。 另 外 ， 如 
果 你 删除 掉 svg 元 素 的 wiath 和 height 属 性 ，SVG 就 会 自动 缩放 来 填 满 容器 。 


直接 插入 SVG 的 做 法 让 你 可 以 使 用 最 多 的 SVG 功能 。 


























7.5.1 利用 符号 复 用 图 形 对 象 


本 章 前 面 曾 提 到 ， 我 从 IcoMoon ( https://icomoon.io/ ) 上 挑选 并 下 载 了 一 些 图 标 。 它 们 是 用 
于 描述 触摸 手势 的 图 标 : 滑动 、 缩 放 、 拖 动 ， 等 等 。 假 设 在 你 正在 搭建 的 网 站 上 ,你 需要 多 次 使 
用 它们 。 是 否 还 记得 我 曾经 提 过 在 SVG 的 符号 定义 里 的 版 本 属性 ”现在 我 们 来 使 用 它 。 

在 example 07-09 里 ， 我 们 通过 aefs 引 入 多 个 符号 定义 。 你 会 注意 到 ， 在 SVG 元 素 上 ， 内 联 
样式 是 aisplay:none， 并 且 wiath 和 height 属 性 都 被 设 为 0 ( 如 果 你 喜欢 的 话 ， 可 以 在 CSS 上 
设置 这 些 样 式 )。 这 样 ，SVG 就 不 会 占用 空间 了 。 我 们 只 是 使 用 SVG 作为 容器 来 放置 我 们 的 图 形 
对 象 的 符号 。 


所 以 ， 我 们 的 代码 会 是 这 样 的 : 






































«body» 

«svg display-"none" width-"0" height="0" version-"1.1" 
xmlns-"http://www.w3.org/2000/svg" xmlns:xlink-"http://www. 
w3.org/1999/xlink"'» 

<defs> 

<symbol id="icon-drag-left-right" viewBox="0 0 1344 1024"> 

<title>drag-left-right</title> 
«path class="path1" d="M256 192v-1601-224 224 224 
224v-160h256v-128z"»«/path» 


注意 到 defs 元 素 中 的 symbol 元 素 了 吗 ? 这 就 是 我 们 定义 一 个 形状 以 供 稍 后 使 用 时 ,会 用 到 
的 元 素 。 


在 定义 所 有 必需 的 符号 元 素 后 ， 我 们 开始 “正常 ”的 HTML 编 码 。 然 后 ， 如 果 想 使 用 其 中 一 
个 符号 ， 我 们 会 这 么 做 : 














«svg class="icon-drag-left-right"> 
<use xlink:href="#icon-drag-left-right"></use> 
</svg> 


这 样 ， 页 面 上 就 会 展示 拖 动 图 标 : 
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eec | | An example from http://rw X Ben 











C || file///Users/benfrain/Documents/Storage/articles/rwd/code/ch7/example 07-... 27 Jj ? e ilg = 


ep 


Q []|Elements| Network Sources Timeline Profiles Resources Audits Console PageSpeed 汪 X Hu, x 


Styles | Computed Event Listeners DOM Breakpoints » 
element.style { + UG o 


) 


w «html class-"no-js" lang-"en"» 
b <head>..</head> 
Y «body» 
b«svg display-"none" width-"0" height-"0" version-"1.1" body ( user agent stylesheet 
xminsz'"http: //www.w3.0rg/2000/svg" xmins:xlinkz"http:// display: block; 
www. wW3.0rg/1999/xlink"»..«/svg» margin: > 8px; 
b» «svg class="icon-drag-left-right">..</svg> 
</body> 
</html> 


' marain 8 








html.no-js 
神奇 之 处 就 是 use 元 素 。 顾 名 思 义 ， 它 就 是 把 已 经 定义 好 的 图 形 对 象 “ 使 用 ”起 来 。 它 通过 
xlink 属 性 来 选择 引入 的 对 象 。 在 本 例 中 ,这 个 属性 是 拖 动 图 标的 符号 ID ( £icon-drag-left- 
right )。 我 们 在 文档 前 定义 了 这 个 符号 。 
当 复 用 符号 的 时 候 ， 除非 你 明确 指定 了 符号 的 大 小 (通过 属性 设置 或 者 CSS 设 置 ), 否则 use 
会 默认 宽 高 为 100%。 所 以 ， 我们 可 以 这 样 来 重新 设置 图 标 大 小 。 















































ni 
































.icon-drag-left-right ( 
width: 2.5rem; 


height: 2.5rem; 
} ES 


use 元 素 可 以 复 用 所 有 的 SVG 内 容 : 梯度 、 形 状 、 符 号 等 。 





7.5.2 ”根据 上 下 文 改变 内 联 SVG 颜色 


使 用 内 联 SVG 后 , 你 可 以 根据 上 下 文 来 改变 SVG 的 颜色 。 这 在 你 需要 多 个 版 本 的 图 标 时 是 十 
分 有 用 的 : 


.icon-drag-left-right { 
fill: $f90; 








} 


.different-context .icon-drag-left-right { 
fill: #ddd; 
} 
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通过 对 父 元 素 的 继承 创造 双色 图 标 








使 用 内 联 SVG， 你 可 以 实现 一 些 有 趣 的 效果 。 例 如 ， 利 用 旧 CSS 变 量 currentcolor， 把 一 
个 单 色 的 SVG 图 标 变 成 双色 (只 要 SVG 内 包含 了 多 个 路 径 )。 要 实现 这 种 效果 ， 需 要 在 SVG 符号 
中 ， 把 你 想 设 置 为 单一 颜色 的 路 径 的 fil11 属 性 设 定 为 currentcolor， 然 后 使 用 CSS 中 的 color 
属性 设 定 这 个 元 素 的 颜色 。 至 于 没有 设置 fi11 属 性 的 路 径 ， 它 们 则 会 使 用 CSS 定 义 的 fil1 值 。 
例如 : 












































.icon-drag-left-right { 
width: 2.5rem; 
height: 2.5rem; 
fill: #f£90; 


color: #ccc; /* 这 会 应 用 在 symbol 中 那些 将 fi11 属 性 值 设 置 为 currentColor 的 Path 上 */ 
) 


























下 面 是 同一 个 符号 被 复 用 了 三 次 ， 每 次 都 是 不 同 的 颜色 和 大 小 : 


你 可 以 在 example 07-09 中 发 现 更 多 有 用 的 东西 。 例 如 ， 颜 色 值 并 不 需要 设置 在 元 素 本 身 ， 
我 们 可 以 设置 在 父 元 素 上 。currentColor 会 继承 DOM 树 上 最 近 的 父 元 素 的 色 值 。 


















































这 种 使 用 方式 有 很 多 好 处 。 唯 一 的 坏处 是 ,如果 你 想 在 页 面 上 使 用 这 些 图 标 ,就 必须 引入 同 
一 个 SVG 代码 。 然 而 ， 因 为 资源 (SVG 代码 ) 不 容易 被 缓存 ， 所 以 这 会 影响 性 能 。 不 过 ,我 们 有 
备用 方案 (如果 你 乐于 插入 一 个 脚本 用 于 兼容 IE 浏览 器 )。 




















7.5.8 ” 复 用 外 部 图 形 对 象 资源 


如 果 每 个 页 面 都 要 添加 庞大 的 符号 集合 ， 那 无 疑 十 分 烦人 。 因 此 ， 我 们 可 以 使 用 use 元 素 链 
接 到 外 部 的 SVG 文件 ， 并 且 抓 取 你 想 要 使 用 的 部 分 。 看 一 下 example 07-10 会 发 现 ， 我 们 在 
example 07-09 中 使 用 的 三 个 图 标 使 用 了 以 下 这 种 插入 方式 : 


























<svg class-"icon-drag-left-right"'» 


«use xlink:href-"defs.svgtticon-drag-left-right"»«/use» 
</svg> 





最 重要 的 部 分 是 herf。 我 们 链接 到 外 部 SVG 文件 (aefs .svg 部 分 )， 然 后 确定 文件 中 我 们 
想 使 用 的 符号 的 ID ( #icon-drag- left-right 部 分 )。 
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这 样 做 的 好 处 是 ， 资 源 会 被 浏览 器 缓存 (和 其 他 外 部 图 像 一 样 )， 并 且 防 止 我 们 的 代码 被 一 
推 SVG 的 符号 定义 塞 满 。 不 足 之 处 是 ， 和 直接 内 联 aefs 不 一 样 ， 对 aefs .svg 做 的 变动 (例如 ， 
用 JavaScript 改 变 其 中 一 条 路 径 ) 不 会 被 更 新 到 use 标 签 中 。 

不 过 有 个 坏 消 息 ， 正 浏览 吉 不 支持 对 外 部 符号 资源 的 引用 。 幸 好 ， 对 于 IE9~IE11， 我 们 有 腻 
子 脚本 (polyfill )。 它 被 称 为 “给 每 个 人 的 SVG”( SVG for Everybody )， 可 以 让 我 们 忽略 正 的 限 
制 。 你 可 以 到 https:/github.comyjonathantnealsvg4everybody 上 了 解 。 

使 用 了 该 段 JavaScript 脚 本 后 ， 你 就 可 以 愉快 地 引入 外 部 资源 。 在 IE 下 ， 腻 子 脚本 会 将 其 中 的 
SVG 数据 直接 搬 人 到 文档 中 供 你 使 用 。 


7.6 不 同 插入 方式 下 可 以 使 用 的 功能 


如 前 所 述 ,，SVG 和 其 他 图 片 资源 是 不 一 样 的。 在 不 同 的 插入 方式 下 ,它们 有 不 同 的 行为 。 我 
们 已 经 知道 了 有 四 种 主要 方法 可 以 插入 SVG: 


口 通过 img 标 签 插入 

口 通过 object 标 签 插入 
a 设置 为 背景 图 像 

口 内 联 


在 上 面 各 种 捅 人 方式 里 ， 有 的 功能 是 可 用 的 ， 有 的 功能 是 不 可 用 的 。 
要 明白 在 每 种 搬入 方式 中 你 可 以 使 用 的 功能 ， 请 看 下 表 。 


特征 img 标签 插入 object 标 签 插入 背景 图 上 


SMIL 动 画 








外 部 CSS 控 制 
内 部 CSS 修 改 
通过 JavaScript 控 制 
缓存 
SVG 内 部 的 媒体 查询 








使 用 use 














我 们 可 以 看 到 表 中 有 些 用 数字 标记 的 注意 事项 。 
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O *1: 在 使 用 object 搬 入 SVG 的 时 候 ， 你 可 以 使 用 外 部 样式 表 ， 但 是 你 必须 在 SVG 文件 里 
引入 该 样式 表 。 
口 *2: 你 可 以 通过 外 部 资源 ( 可 以 缓存 ) 的 方式 引入 SVG， 但 是 在 正 浏 览 器 中 默认 是 不 文 


















































持 的 。 
口 *3: 在 内 联 SVG 文 件 中 的 样式 表 部 分 的 媒体 查询 ， 其 作用 对 象 是 其 所 在 文档 的 大 小 〈 而 
非 SVG 本 身 大 小 )。 


浏览 器 兼容 性 问题 

要 注意 到 每 个 浏览 器 对 SVG 的 实现 可 能 不 一 样 。 因 此 ， 不 是 每 个 浏览 器 都 实现 了 上 述 内 容 ， 
又 或 者 ， 不 是 每 个 浏览 器 的 表现 都 是 一 致 的 。 

例如 ， 上 表 中 描述 的 结果 是 基于 example_07-03 生 成 的 。 

示例 的 行为 在 最 新 版 本 的 Firefox、Chrome 和 Safari 中 都 是 一 致 的 。 然而 , IE 有 的 时 候 会 不 一 样 。 


例如 ， 我 们 已 知 ， 在 所 有 兼容 SVG 的 正版 本 〈 此 刻 指 的 是 IE9、IE10 和 IE11 ) 里 ,不 能 引用 
外 部 SVG 资源 。 此 外 ,无论 采用 什么 方法 插入 SVG，IE 都 会 把 外 部 样式 表 中 的 样式 应 用 到 SVG 上 
(其 他 浏览 器 只 有 在 SVG 采用 内 联 或 者 object 标 签 方式 引入 的 时 候 才 应 用 ), 正 还 不 允许 通过 CSS 
为 SVG 添加 动画 ， 你 只 能 用 JavaScript 实 现 。 我 这 里 要 踪 叫 一 下 : 在 IE 上 ， 你 只 能 通过 JavaScript 
为 SVG 添加 动画 。 




































































7.7 SVG RK 

让 我 们 先 把 浏览 器 的 小 毛病 放 到 一 边 , 考虑 一 下 表 中 这 些 特征 允许 你 做 什么 , 以 及 为 什么 你 
想 用 /不 想 用 它们 。 

无 论 用 什么 方式 插入 ，SVG 都 会 使 用 设备 最 高 的 分 辩 率 来 泻 染 。 在 大 多 数 情 况 下 ,分辨 率 无 
关 性 是 使 用 SVG 的 理由 。 至 于 选择 哪 种 插入 方式 ， 一 般 取 决 于 你 的 工作 流 和 手头 上 的 工作 。 

然而 ， 还 是 有 其 他 功能 值得 了 解 的 。 例 如 SMIL 动 画 、 引 入 外 部 样式 表 的 方式 、 用 字符 数据 


分 隔 符 标识 内 部 资源 的 方法 、 使 用 JavaScript 修 改 SVG 的 方法 以 及 如 何在 SVG 内 部 使 用 媒体 查询 。 
下 面 让 我 们 来 了 解 了 解 。 























7.7.1 SMIL 动画 





SMIL 动 画 ( https://www.w3.org/TR/smil-animation/ ) 是 一 种 在 SVG 文档 内 部 定义 SVG 动画 的 
方法 。 
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SMIL ( 发 音 和 “smile” 一 致 ) Jésynchronized multimedia integration language ( 同步 多 媒体 集 
成 语言 ) 的 缩写 ， 被 开发 来 作为 在 XML 文档 中 定义 动画 的 方法 〈 记 住 ，SVG 是 基于 XML 的 )。 


下 面 是 定义 SMIL 动画 的 示例 ; 





«g class-"star Wrapper" fill-"none" fill-rule-"evenodd"» 

«animate xlink:href-"i4star Path" attributeName-"fill" 
attributeType-"XML" begin-"0s" dur="2s" fill-"freeze" from-"4F8E81C" 
toz"414805e" /> 


«path id-"star Path" strokez"4979797" stroke-width-"3" 

fill2"4F8bE81C" d-"M99 1541-58.78 30.902 11.227-65.45L3.894 

73.097165.717-9.55L99 4129.39 59.55 65.716 9.548-47.553 46.353 11.226 

65.4522" 4> 

«/g» 

我 采用 的 是 一 个 我 们 先前 看 过 的 SVG 示例 。g 元 素 是 SVG 中 的 一 个 分 组 元 素 。 在 此 例 中 ， 它 
包括 了 一 个 星 形 ( 带 有 属性 ida="star_Path" 的 path 元 素 ) 和 animate 苑 素 中 的 SMIL 动 画 。 这 
个 简单 的 动画 是 在 两 秒 内 把 星 形 从 黄色 渐变 为 绿色 。 更 重要 的 是 ， 无 论 是 通过 img、object、 
backgroundq-image 或 者 内 联 插 和 人， 都 会 实现 该 动画 效果 ( 你 可 以 在 除 正 外 的 浏览 器 中 打开 
example 07-03 观 看 效果 )。 












































tweening 


Bs x tweening (渐变 ) 是 inbetweening 的 缩写 。 它 表示 从 动画 中 的 某 一 个 点 过 渡 


另 一 个 点 。 





这 效果 很 棒 ， 对 不 对 ?尽管 SMIL 成 为 标准 已 经 有 一 段 时 间 了 ,但 是 它 也 行将 就 木 了 。 
SMIL 的 结局 


下 并 不 支持 SMIL ， 或 者 说 ， 不 怎么 、 不 太 、 不 那么 、 几 乎 不 支持 。 恩 ， 言 下 之 意 就 是 SMIL 
在 此 时 不 受 下 支持 。 


更 糟糕 的 是 ( 我 知道 ， 我 在 打击 你 ) 微软 并 没有 计划 引入 它 。 你 可 以 在 https://developer. 
microsoft.com/en-us/microsoft-edge/platform/status/svgsmilanimation 上 看 看 平台 支持 度 。 


























另外 ，Chrome 已 经 声明 了 准备 在 Chrome 浏 览 器 上 放弃 SMIL: https://groups.google.com/a/ 
chromium.org/forum/#!topic/blink-dev/So0y10440LM%S5B1-25%5D, 


Ka 如 果 你 还 是 需要 使 用 SMIL，Sara Soueidan 写 了 一 篇 十 分 有 深度 的 文章 来 介 
绍 SMIL 动 画 。 可 以 访问 https:/Wcss-tricks.comy/guide-svg-animations-smil 阅 读 。 
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万 幸 的 是 , 仍然 有 许多 方法 来 制作 SVG 动 画 , 我 们 稍 后 会 谈 到 。 所 以 如 果 你 要 支持 于 浏览 器 ， 
请 一 定 要 坚持 读 下 去 。 








7.7.2 ”使 用 外 部 样式 表 为 SVG 添加 样式 


我 们 可 以 用 CSS 来 为 SVG 添 加 样式 。 你 可 以 把 CSS 包 正在 SVG 内 ,或 者 在 你 写 CSS 的 地 方 添 
加 这 类 CSS。 














现在 ， 如 果 翻 到 我 们 之 前 提起 的 功能 表 ， 你 会 看 到 ， 当 使 用 img 标 签 或 者 作为 
background-image 捅 和 图片 时 (除了 下 浏览 需 )， 你 是 不 能 使 用 外 部 CSS 给 SVG 添加 样式 的 。 
只 有 在 内 联 或 者 通过 object 标 签 插入 的 情况 下 ， 才 能 实现 。 


有 两 种 方法 可 以 在 SVG 中 链接 外 部 样式 表 。 最 直接 的 方式 是 这 样 ( 你 通常 会 在 aefs 部 分 中 
添加 ): 












































«link href="styles.css" type="text/css" rel="stylesheet"/> 


这 和 我 们 在 HTML5 前 链接 样式 表 的 方法 比较 相似 (例如 ,type 属 性 在 HTML5 中 已 经 不 是 必 
需 的 了 )。 然 而 ， 尽 管 在 很 多 浏览 器 上 这 个 方法 都 能 生效 ， 但 是 它 不 是 规范 上 定义 的 标准 方法 
https:/www.w3.org/TR/SVG/styling.html。 下 面 是 正确 的 /官方 的 方法 ， 是 1999 年 为 XML 定义 的 
( https://www.w3.org/1999/06/REC-xml-stylesheet-19990629/ ): 


























<?xml-stylesheet href="styles.css" type="text/css"?> 
你 需要 在 你 的 SVG 元 素 前 添加 这 段 代 码 。 例 如 : 
<?xml-stylesheet href-"styles.css" type="text/css"?> 


<svg width="198" height="188" viewBox="0 0 198 188" xmlns="http://www. 
w3.org/2000/svg" xmlns:xlink-"http://www.w3.org/1999/xlink"» 


有 趣 的 是 ， 后 者 是 唯一 一 个 可 以 在 下 上 工作 的 语法 。 所 以 ， 当 你 需要 从 你 的 SVG 中 链接 外 部 
样式 表 时 ， 我 推荐 你 使 用 第 二 种 语法 ， 因 为 它 的 支持 度 更 高 。 


当然 ， 你 不 是 必须 要 使 用 外 部 样式 表 ， 你 可 以 在 SVG 上 直接 使 用 内 联 样式 。 









































7.7.3 ”使 用 内 联 样式 为 SVG 添加 样式 


你 可 以 在 SVG 内 部 放置 它 本 身 的 样式 。 它 们 应 该 被 放置 在 aefs 元 素 内 。 因 为 SVG 是 基于 
XML 的 ， 所 以 比较 安全 的 做 法 是 要 加 上 字符 数据 (Character Data, CDATA ) 标记 。CDATA 标 
记 只 是 告诉 浏览 句 ， 字 符 数 据 分 隔 符 之 间 的 信息 可 以 当 作 XML 标记 插入 人， 但 是 不 应 该 被 插入。 
语法 如 下 : 















































«defs» 
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«style type-"text/css"» 
«![CDATA[ 
dstar Path ( 
stroke: red; 
) 
11» 
«/style» 
«/defs» 


CSS 中 的 SVG 属性 
注意 上 例 代 码 中 的 st 
不 少 的 SVG 属性 (无 论 


B 
background-colo 


果 想 知道 所 有 SVG 的 

















ny 


























E 




















roke 属 性 。 它 并 不 是 CSS 
是 内 联 样 式 抑 或 外 部 样式 表 )。 例 如 ， 对 于 SVG ， 你 不 用 指定 
r ， 而 是 需要 定义 fi11。 你 无 需 定义 border， 而 是 定义 stroke-wiqdth。 如 









































遇 性 ， 而 是 SVG 属性 。 你 在 样式 中 可 以 使 用 





盟 性 值 ， 可 以 参考 规范 : https://www.w3.org/TR/SVG/styling.html, 


无 论 是 内 联 还 是 外 部 引入 的 CSS， 你 都 可 以 做 “正常 ”的 CSS 行 为 : 改变 元 素 的 外 观 、 添 加 








动画 、 变 换 元 素 ， 等 


等 。 


7.7.4 用 CSS 为 SVG 添加 动画 


让 我 们 看 一 个 在 SVG 内 部 为 SVG 添 加 CSS 动 画 的 例子 ( 记 住 , 这些 样 式 也 可 以 写 在 外 部 样式 


KP )。 
让 我 们 拿 之 前 看 到 的 星 形 举 个 例子 。 





«div class-"wrapper" 
<SVg width-"198" 
www.w3.0org/2000/svg" 
«title»Star 

«defs» 


> 
height-"188" 
xmlns:xlink- 

1«/title» 


«style type-"text/css" 


«![CDATA[ 
Gkeyframes spin ( 
0$ ( 


transform: 


) 


100$ ( 


transform: 


) 

) 

.Star Wrapper { 
animation: 


} 

.wrapper { 
padding: 
margin: 


2rem 
2rem; 


这 次 我 们 让 它 旋转 起 来 。 你 可 以 查看 example_07-07: 


viewBox-"0 0 220 200" xmlns="http:// 
"http://www.w3.org/1999/xlink"'» 


rotate(0deg); 


rotate(360deg); 


spin 2s 1s; 
transform-origin: 


50% 50$; 


; 
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] ] > 
</style> 
<g id="shape"> 
«path fill="#14805e" d="M50 50h50v50H50z"/> 
<circle fill="#ebebeb" cx="50" cy="50" r="50"/> 
«/g» 
«/defs» 
«g class-"star Wrapper" fill-"none" fill-rule-"evenodd"» 
«path id-"star Path" stroke-"4333" stroke-width-"3" 
fill-"4F8E81C" d-"M99 1541-58.78 30.902 11.227-65.45L3.894 
13409716547 U/-9:755199* 4129.739- 59.55.0657; 716:-9::548-47.,553- 46,353 11:226 
65.453z"/» 
«/g» 
«/Svg» 
</div> 


如 果 你 在 浏览 器 中 观看 示例 ， 一 秒 钟 后 ， 星 形 会 完成 一 次 耗 时 两 秒 的 旋转 。 





要 注意 SVG 上 的 transform-origin 被 设置 为 50% 50%。 这 是 因为 与 CSS 
不 同 ，SVG 上 默认 的 transform-origin 不 是 50% 50% (元 素 的 正中 间 ), 而 是 0 0 
(元 素 的 左上 角 )。 如 果 不 指定 该 属性 ， 星 形 会 围绕 左上 和 角 进 行 旋 转 。 











仅仅 用 CSS 的 animation 你 就 可 以 制作 很 多 SVG 动画 ( 当然 是 在 不 需要 兼容 下 的 情况 下 )。 然 
而 ， 当 你 需要 添加 交互 功能 、 文 持 正 浏览 器 或 者 同步 一 系列 事件 的 时 候 ,， 最 好 使 用 JavaScript 实 现 
动画 效果 。 奉 运 的 是 ,我们 可 以 依靠 一 些 库 来 制作 SVG 动画 。 下 面 让 我 们 看 一 个 这 样 的 例子 。 





























7.8 使 用 JavaScript 添加 SVG 动画 


当 一 个 SVG 是 通过 内 联 或 者 object 标 签 的 方式 插入 到 页 面 时 ， 我 们 可 以 通过 JavaScript 直 接 
或 者 间接 地 控制 它 。 

间接 的 意思 是 指 我 可 以 通过 JavaScript 来 改变 它 或 者 它 的 父 类 的 class, 从 而 触发 动画 效果 。 例 
如 : 



















































































svg { 
/* 没有 动画 效果 */ 
} 
.added-with-js svg { 
/* 动画 */ 
} 


当然 ， 你 也 可 以 直接 使 用 JavaScript 来 制作 动画 效果 。 
如 果 你 只 要 实现 一 两 个 独立 的 动画 效果 , 那么 自己 手写 JavaScript 代 码 会 是 一 个 明智 的 、 更 为 
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双 量 级 的 选择 。 然 而 ， 如 果 你 需要 在 时 间 轴 上 添加 大 量 的 动画 效果 或 者 需要 同步 多 个 动画 , 那么 
一 个 JavaScript 动 画 库 会 让 你 事半功倍 。 最 终 , 你 需要 判断 的 是 , 为 了 你 的 目标 引入 这 个 库 到 页 面 


里 是 否 合 适 。 



































我 推荐 使 用 GreenSock 动 夯 平台 ( http://greensock.com/ )、 Velocity.js ( http://julian.com/research/ 
velocity/ ) 或 者 Snap.svg ( http://snapsvg.io/ )。 在 下 个 例子 里 ， 我 会 使 用 GreenSock 写 一 个 小 例子 。 
使 用 GreenSock 添加 SVG 动画 


假设 我 们 要 做 一 个 刻度 盘 , 它们 会 根据 我 们 设 定 的 值 而 展示 动画 。 我 们 希望 不 仅 刻度 盘 的 边 
框 长 度 和 颜色 会 改变 ,同时 中 间 的 数字 也 会 变化 。 你 可 以 在 example_07-08 中 查看 完整 代码 。 


所 以 ， 假 如 我 们 输入 7$， 然 后 点 击 “Animate!!” 按 钮 ， 它 会 变 成 这 个 样子 : 


Adjust Width ce 


Entervalue 7 5 A 








为 了 简洁 ,我 不 会 贴 出 完整 的 JavaScript 代 码 ( 那里 有 详细 的 注释 ,因此 你 应 该 独立 去 阅读 它 )， 
我 只 关注 几 个 关键 点 。 


























基本 思想 是 , 我 们 需要 用 <path> 元 素 ( 而 不 是 <circle> 元 素 ) 来 实现 一 个 圆圈 。 路 径 (path ) 





就 意味 着 我 们 可 以 使 用 stroke-dashoffset 技 术 来 制作 动画 路 径 。 在 后 文中 我 们 会 谈 到 这 项 技 
术 ， 因 此 这 里 我 只 是 简短 地 介绍 一 下 。 我 们 使 用 JavaScript 来 度量 路 径 的 长 度 ， 然 后 使 用 
stroke-dashoffset 属 性 来 指定 泻 染 部 分 的 长 度 和 缺失 部 分 的 长 度 。 然 后 用 stroke- 
dashoffset 来 改变 qasharray 开 始 的 位 置 。 这 意味 着 你 可 以 控制 path 上 的 stroke 的 长 度 并 
且 让 它 动 起 来 。 这 看 起 来 好 像 路 径 正 在 绘制 一 样 。 

如 果 dashnarray 变 化 的 目标 值 是 一 个 静态 的 已 知 值 , 那么 使 用 CSS 的 animation 实 现 也 是 相对 
简单 的 (我 们 会 在 下 一 章 中 讨论 )。 

当然 ， 除 了 动态 值 问题 外 ， 我 们 还 需要 让 stroke 的 颜色 渐变 ， 还 要 可 视 化 地 在 文本 节点 上 


显示 输入 值 的 计算 过 程 。 这 个 动画 的 复杂 程度 相当 于 我 们 在 拍 着 自己 的 头 、 揉 着 自己 的 肚子 的 同 
时 从 10 000 开 始 倒 数 。GreenSock 让 这 些 任务 变 得 相当 简单 (动画 部 分 : 它 不 会 要 求 你 拍 头 或 者 
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揉 肚子 ， 但 是 你 还 是 需要 从 10 000 开 始 倒数 )。 下 面 是 让 GreenSock 产 生 该 效果 的 JavaScript 代 码 : 


// 动态 绘制 线条 并 改变 颜色 
TweenLite.to(circlePath, 1.5, ('stroke-dashoffset': "-"+amount, 
Stroke: strokeEndColour)]); 
// 将 计数 器 设置 为 0， 然 后 根据 输入 值 改变 
var counter = ( var: 0 ); 
TweenLite.to(counter, 1.5, ( 

var: inputValue, 

onUpdate: function () ( 

text.textContent = Math.ceil(counter.var) + "$£"; 





Fr 
ease:Circ.easeOut 


IJ e 
从 本 质 上 讲 , 你 需要 往 TweenLite.to() 水 数 传 入 你 想 要 的 动画 、 动 画 开始 的 时 间 点 、 你 想 
改变 的 数值 ( 和 改变 后 的 结果 )。 


GreenSock 拥 有 出 色 的 文档 和 论坛 ， 所 以 一 旦 你 发 现 自己 需要 做 大 量 的 同步 动画 ， 请 从 你 的 
日 程 里 空 出 一 天 来 熟悉 GreenSock。 








可 能 你 没 听 过 SVG“ 线 图 ”技术 。Vox Media 曾 经 用 线 图 技术 绘制 出 Xbox One 
M 和 Playstation 4 游戏 手柄 。 这 个 事情 曾经 被 Polygon 杂 志 报 道 过 。 你 可 以 在 
http://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-anima- 
tions-for-fun-and-profit E 4 AX. 75 7h, Jake Archibald JE https://jakearchibald. 
com/2013/animated-line-drawing-svg/ 上 也 有 很 棒 的 解释 。 


7.9 优化 SVG 


作为 一 个 尽责 的 开发 者 , 我 们 会 尽 可 能 压缩 资源 大 小 。 最 简单 的 方法 是 使 用 自动 化 工具 来 优 
化 SVG 文件 。 除 了 那些 明显 的 做 法 ， 如 去 掉 不 需要 的 元 素 〈 如 标题 和 描述 元 素 )， 我 们 还 可 以 做 
很 多 微 优 化 。 这 些微 优化 又 加 后 ， 其 效果 往往 出 乎 我 们 的 意料 。 


目前 , 我 推荐 使 用 SVGO ( https://github.com/svg/svgo )。 如 果 你 从 没 使 用 过 SVGO, 我 推荐 你 
从 SVGOMG ( https;//jakearchibald.github.io/svgomg/ ) 开始 。 这 是 一 个 浏览 器 版 本 的 SVGO ， 你 可 
以 切换 不 同 的 优化 插件 ， 并 且 可 以 看 到 即时 的 优化 反馈 。 


还 记得 本 章 开 头 的 星 形 例 子 吗 ?” 默认 情况 下 ， 该 例子 的 大 小 为 489 字 节 。 通 过 SVGO 处 理 后 ， 
它 的 大 小 会 变 为 218 字 节 ， 这 还 是 在 保留 了 viewbox 的 情况 下 。 它 们 压缩 了 55.42% 的 大 小 。 如 果 
你 使 用 了 一 大 堆 SVG 图 像 ， 这 种 优化 的 效果 会 很 明显 。 下 面 是 优化 后 的 SVG 代码 ; 

«svg width-"198" height-"188" ViewBox="0 0 198 188" xmlns-"http:// 


www.w3.org/2000/svg"»«path stroke-"4979797" stroke-width-"3" 
fill-"4F8bE81C" d-"M99 1541-58.78 30.902 11.227-65.45L3.894 
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73.097165. 117-29.:55hn99- 4129.39. 59.55.65. 116 .9:/548-47..553. 46.353: 11.226 
65.454z"/»«/sSvg» 


使 用 SVGO 之 前 你 要 意识 到 ，SVGO 非 常 流行 ， 其 他 很 多 SVG 工具 也 使 用 它 。 例 如 ,我们 提 
到 过 的 Iconizr ( http://iconizr.com/ ) 就 会 默认 用 SVGO 处 理 你 的 SVG 文件 。 所 以 ， 你 要 尽量 避免 无 
意义 的 多 次 优化 。 











7.40 把 SVG 作为 滤 镜 


在 第 6 章 中 , 我 们 提 到 了 CSS 的 滤 镜 效果 。 然而 , 它们 在 IE10 和 IE11 上 尚未 被 支持 。 庆幸 的 是 ， 
我 们 可 以 依靠 SVG 在 IE10 和 IE11 上 创建 滤 镜 。 但 是 这 和 以 往 一 样 ， 并 没有 你 想象 中 那么 直接 。 例 
如 ， 在 example_07-05 里 ,我们 在 body 里 有 如 下 标记 : 











«img class-"HRH" src-"queenQ2x-1024x747.png"/» 


那 是 一 张 英国 女王 的 图 片 ， 像 这 样 : 























同样 ， 在 该 示例 的 文件 夹 里 ， 有 一 个 SVG 里 定义 了 一 个 滤 镜 ， 代 码 如 下 : 


<svg xmlns-"http://www.w3.0rg/2000/svg" version-"1.1"» 
«defs» 
«filter id-"myfilter" x-"0" y="0"> 
«feColorMatrix in-"SourceGraphic" type-"hueRotate" 
values-"90" result-z"A"/» 
«feGaussianBlur in-"A" stdDeviation-"6"/» 
«/filter» 
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«/defs» 
«/Svg» 


在 滤 镜 内 ， 我 们 首先 定义 一 个 90 度 的 色 盘 旋转 (使 用 fecolorMatrix ), 然后 写 人 特效 , 通 
过 result 属 性 导向 下 一 个 过 滤器 ( feGaussianBlur )， 并 在 上 面 设置 模糊 值 为 6。 这 里 要 强调 
一 下 ， 它 看 上 去 并 不 优雅 ,但 是 无 疑 它 能 够 正常 工作 。 


现在 ， 我 们 无 需 直 接 把 SVG 标记 添加 到 HTML 中 去 ， 而 是 通过 上 一 章 提 到 的 CSS 过 滤器 语法 
引用 它 。 


.HRH ( 
filter: url('filter.svgtsmyfilter'); 




















H 
在 大 多 数 流 行 的 浏览 器 (Chrome, Safari, Firefox) 上 上， 效果 是 这 样 的 ; 























不 幸 的 是 ， 这 个 方法 在 IE10 和 IE11 上 并 不 生效 。 然 而 ,还 是 有 其 他 方法 来 达到 目标 的 。 我 们 
可 以 直接 在 SVG 里 用 SVG 的 image 标 签 引 入 该 图 片 。 在 example_07-06 中 ， 我 们 有 如 下 代码 : 


«svg height="747px" width-"1024px" viewbox="0 0 1024 747" 
xmlns-"http://www.w3.org/2000/svg" version-"1.1"» 
«defs» 
«filter id-"myfilter" x-"0" y="0"> 
«feColorMatrix in-"SourceGraphic" type-"hueRotate" 
valuesz"90" result-z"A"/» 
«feGaussianBlur in-"A" stdáDeviation-"6"/» 
«/filter» 
«/defs» 
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«image x="0" y="0" height-"747px" width-"1024px" 
xmlns:xlink-"http://www.w3.0rg/1999/xlink" xlink:href-"queene2x- 
1024x747.png" filter-"url (ismyfilter)"»«/image» 


«/svg» 
这 个 SVG 标记 和 前 一 个 例子 中 的 外 部 filter.svg 滤 镜 十 分 相似 ， 但 是 添加 了 height 、 
属性 。 另 外 ， 我 们 需要 的 图 像 是 SVG 中 aefs 元 素 外 的 唯一 内 容 。 我 们 使 用 


width 和 viewbox 属 


filtez 属 性 和 滤 镜 的 也 来 链接 到 我 们 需要 的 滤 镜 〈 在 上 方 的 aefs 中 定义 )。 























虽然 这 个 方法 比较 麻烦 , 但 是 你 可 以 从 SVG 里 获得 更 多 的 滤 镜 效果 ， 而 且 能 够 在 IE10 和 IE11 
中 正常 工作 。 


7.11 SVG 中 媒体 查询 的 注意 事项 

所 有 支持 SVG 的 浏览 器 应 该 都 支持 SVG 内 部 定义 的 CSS 媒 体 查询 。 然 而 ， 当 你 用 到 SVG 内 部 
的 媒体 查询 时 ， 还 是 要 注意 一 些小 问题 。 

例如 ， 假 设 你 插入 如 下 的 SVG 内 部 媒体 查询 : 





«style type-"text/css"»«! [CDATA[ 
Hdstar Path ( 
stroke: red; 
} 
@media (min-width: 800px) { 
#star_Path { 
Stroke: violet; 
} 
} 
]]></style> 


当 视 口 为 1200 像 素 宽 的 时 候 ， 该 SVG 的 大 小 为 200 像 素 宽 。 




















我 们 想 让 这 个 星星 在 屏幕 宽度 超过 800 像 素 的 时 候 ， 边 框 呈现 为 紫色 。 而 这 正 是 我 们 所 写 的 
媒体 查询 的 意图 。 然 而 ,， 当 SVG 通过 img 标 签 插 入 、 作 为 背景 图 像 插入 或 者 通过 object 标 签 插入 
的 时 候 , 它们 并 不 清楚 外 部 HTML 文 档 的 信息 。 因 此 ， 此 时 的 min-wiath 就 是 SVG 本 身 的 最 小 宽 
度 。 所 以 ， 除 非 SVG 本 身 的 宽度 大 于 800 像 素 ， 否 则 边框 不 会 变 成 紫色 。 相 反 ， 当 你 插入 一 个 内 
联 SVG 的 时 候 ， 它 和 页 面 融合 在 一 起 ( 某 种 程度 上 可 以 这 么 说 )。 此 时 媒体 查询 中 的 min-wiath 
会 由 视 口 (就 是 HTML 中 的 视 口 ) 决定 。 


为 了 解决 这 个 问题 ， 并 且 让 媒体 查询 表现 一 致 ， 可 以 这 样 修改 我 们 的 代码 : 















































@media (min-device-width: 800px) { 
#star_Path { 
stroke: violet; 


} 
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这 种 情况 下 , 无 论 SVG 大 小 如 何 , 采用 何 种 方法 插入 , 它们 都 会 寻找 设备 宽度 (也 就 是 视 口 ) 


进行 比 对 。 


7.11.1 ”实现 技巧 























本 章 差不多 要 结束 了 , 但 是 就 SVG 而 言 , 我 们 仍然 有 很 多 可 以 谈 的 。 因 此 , 我 列 出 几 个 不 相 
关 的 注意 事项 。 它 们 不 太 值得 我 们 长 篇 大 论 , 但 是 我 会 用 注意 事项 的 方式 标记 出 来 ， 从 而 节省 你 





搜索 的 时 间 。 




















口 ZEM HHH 

















口 如 果 你 不 需要 添加 SVG 动 画 ， 选 择 图 片 精灵 或 者 data URI 样 式 表 的 方式 进行 调用 。 这 样 会 
更 容易 提供 备用 资源 ， 而 且 在 性 能 方面 也 表现 得 更 好 。 

a 在 资源 创建 的 过 程 中 尽 可 能 使 用 自动 化 ， 这 样 会 减少 人 工 错误 并 日 效率 更 高 。 

入 SVG 的 话 ， 尽 可 能 只 用 一 种 调用 方式 (图 片 精灵 、data URI 或 者 内 联 )。 
多 种 引入 方式 不 利于 后 期 维护 。 

a 在 SVG 动画 上 没有 “一 刀 切 ”的 方案 。 对 于 偶尔 使 用 而 且 简 单 的 动画 ,使 用 CSS。 对 于 交 



































互 复杂 的 动画 或 者 时 间 轴 动画 ， 而 且 需 要 在 IE 上 和 后 效 的 ， 使 用 可 靠 的 库 ， 如 GreenSock、 
Velocity.js 或 者 Snap.svg。 





7.11.2 更 多 资料 
正如 我 在 本 章 开 头 提 到 的 ， 本 书 篇 幅 有 限 ,而 我 也 没有 能 力 传授 所 有 SVG 知 识 。 因 此 , 我 提 


供 下 列 优质 的 学 习 资 源 。 


口 《SVG 精 髓 (第 2 版 )》"， 由 J. David Eisenberg 和 Amelia Bellamy-Royds 编 写 。 
口 SVG 动画 ( SMIL ) 指南 ， 由 Sara Soueidan 编 写 ( https://css-tricks.com/guide-svg-animations- 


smil/ )。 





a SVG 教程 ， 
























































O SVG 内 部 媒体 查询 测试 ， 由 Jeremie Patonnier 编 写 (http://jeremie.patonnier.net/experiences/ 
svg/media-queries/test.html )。 

口 现代 浏览 器 的 SVG 指 南 (https;//www.w3.org/Graphics/S VG/IG/resources/svgprimer.html )。 
口 了 解 SVG 坐 标 系 和 变换 ( 第 一 部 分 )， 由 Sara Soueidan 编 写 ( https://sarasoueidan.com/blog/ 
svg-coordinate-systems/ )。 

OQ 动手 实践 : SVG 滤 镜 效 果 ( https://testdrive-archive.azurewebsites.net/Graphics/hands-on- 
css3/hands-on svg-filter-effects.htm )。 



































Jakob Jenkov 编 写 ( http://tutorials.jenkov.com/svg/index.html )。 

















CD 此 书 已 由 人 民 邮 电 出 版 社 出 版 。 一 一 编者 注 
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7.12 ”小结 

在 本 章 中 , 我 们 介绍 了 很 多 在 响应 式 设 计 中 使 用 SVG 前 需要 知道 的 知识 。 我 们 介绍 了 不 同 的 
图 像 编辑 程序 和 在 线 方式 来 创造 SVG 资源 。 还 探讨 了 各 种 插 和 方式、 它们 对 应 的 功能 以 及 在 各 浏 
览 器 中 的 表现 。 

我 们 还 了 解 了 怎么 引入 外 部 资源 中 的 SVG 和 重用 SVG 符 号 。 此 外 还 学 习 了 如 何 利用 可 以 被 引 
用 到 CSS 中 的 SVG 制 造 滤 镜 ， 以 获得 比 CSS 滤 镜 更 广泛 的 支持 。 


最 后 , 我 们 了 解 了 如 何 用 JavaScript 库 来 帮助 我 们 制作 SVG 动 画 ， 以 及 如 何 用 SVGO 工 具 来 优 
化 SVG。 

下 一 章 ， 我 们 会 了 解 CSS 中 的 过 渡 、 变 形 和 动画 。 它 也 是 值得 阅读 的 和 SVG 相 关 的 章节 ， 
为 很 多 语法 和 技术 也 能 用 在 SVG 文件 中 。 所 以 ， 给 你 自己 备 好 一 杯 热 饮 ， 我 们 稍 后 再 见 。 




















CSS3 过 渡 、 变 形 和 动画 








从 历史 上 看 , 每 当 需 要 移动 元 素 或 者 添加 动画 效果 时 , 这 就 是 JavaScript 的 专属 领域 现 如 今 ， 
通过 CSS3 的 三 个 主要 代理 一 一 过 渡 ( transition )、 变 形 (transform ) 和 动画 ( animation ) 一 一 就 
可 以 完成 大 部 分 动画 工作 。 事实 上 ， 只 有 过 渡 和 动画 是 和 运动 相关 的 ， 变 形 只 是 让 我 们 去 改变 元 
素 。 但 是 正如 我 们 看 到 的 ， 在 制作 优秀 的 动画 效果 时 ， 它 们 三 个 都 是 不 可 或 缺 的 。 


为 了 讲 清楚 它们 各 自 的 责任 ， 我 将 在 这 里 做 一 些 简单 的 解释 。 

口 当 你 知道 动画 的 起 始 状 态 和 终止 状态 ， 并 且 需 要 一 个 简单 的 变形 方法 时 ， 使 用 CSS 过 渡 。 
O 当 你 需要 在 视觉 上 改变 某 个 元 素 但 又 不 想 影 响 页 面 布局 的 时 候 ， 使 用 CSS 变 形 。 

a 当 你 想 在 一 个 元 素 上 执行 一 系列 关键 帧 动画 时 ， 使 用 CSS 动 画 。 


那么 就 让 我 们 来 了 解 如 何 使 用 这 些 功能 吧 。 在 这 一 章 ， 我 们 会 谈 到 : 


口 什么 是 CSS3 过 渡 以 及 如 何 使 用 它 

口 如 何 编写 CSS3 过 渡 以 及 它 的 简写 语法 
口 CSS3 过 渡 调 速 函 数 (ease、cubic-bezier 等 ) 

口 响应 式 网 站 中 有 趣 的 过 渡 效 果 

a 什么 是 CSS3 变 形 以 及 如 何 使 用 它 

aO 理解 不 同 的 2D 变 形 ( scale、rotate、skew、translate 等 ) 
口 理解 3D 变 形 

口 如 何 使 用 keyframes (关键 帧 ) 制作 动画 效果 




























































































8.1 什么 是 CSS3 过 渡 以 及 如 何 使 用 它 


当 元 素 的 CSS 状 态 改变 时 , 过 渡 是 最 简单 的 创造 视觉 效果 的 方式 。 让 我 们 看 一 个 简单 的 例子 ， 
当 鼠 标 惹 停 在 一 个 元 素 上 时 ， 元 素 从 一 个 状态 过 渡 到 男 一 个 状态 。 

我 们 在 给 超 链接 设置 样式 的 时 候 , 一 般 都 会 设置 一 个 悬 停 状态 的 效果 , 这 种 方法 能 明显 地 提 
醒 用 户 他 的 鼠标 指向 的 是 一 个 超 链接 。 昌 然 悬 停 状 态 对 越 来 越 多 的 触摸 屏 设 备 没 有 太 大 用 处 , 但 
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对 于 使 用 鼠标 的 用 户 来 说 , 却 是 与 网 站 交互 的 一 种 简单 实用 的 方式 。 我 们 用 这 个 例子 来 说 明 过 渡 。 


在 使 用 CSS 的 时 候 ， 悬 停 状态 通常 就 是 一 个 开关 。 元 素 默 认 有 一 个 状态 ， 然 后 在 鼠标 悬 停 其 
上 时 马上 切换 到 另 一 种 状态 。 而 CSS3 的 过 渡 ， 顾 名 思 义 ， 人 允许 我 们 在 不 同 的 状态 之 间 切 换 。 


先 让 我 们 了 解 几 个 重要 的 事情 。 首 先 ， 你 不 能 从 display: none; REF 

始 过 渡 。 当 某 个 元 素 被 设 为 qisplavy: none; 的 时 候 ， 事 实 上 它 没有 被 “绘制 ” 

Cu. 在 屏幕 上 ， 所 以 没有 状态 让 你 进行 过 渡 。 为 了 创造 渐进 的 效果 ， 你 需要 修改 

opacity 或 者 position 的 值 。 其 次 ， 并 非 所 有 属性 都 可 以 进行 过 渡 。 为 免 你 做 

无 用 的 尝试 ， 请 看 可 以 进行 过 渡 的 元 素 的 列表 : https:/www.w3.org/TR/css3- 
transitions/。 


打开 example_08-01， 你 会 看 到 nav 标 签 里 有 一 些 链接 。 相 关 代码 如 下 : 


«nav» 
«a href="#">link1</a> 
«a href-"'ié"»2link2«/a» 
«a href="#">link3</a> 
«a href="#">link4</a> 
«a href="#">link5</a> 

«/nav» 

相关 CSS 代 码 如 下 : 

a (t 


font-family: sans-serif; 
color: dfff; 

text-indent: 1rem; 
background-color: #ccc; 
display: inline-flex; 
flex: 1 1 20$; 

align-self: stretch; 
align-items: center; 
text-decoration: none; 
transition: box-shadow 1s; 





a+af{ 
border-left: 1px solid #aaa; 
} 


a:hover { 
box-shadow: inset 0 -3px 0 #CC3232; 
} 


此 时 超 链 接 有 两 种 状态 ， 下 图 为 默认 状态 : 
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下 图 为 悬 停 状态 : 


eoe An example from http;/rwd.edu... x ES 


€  @ file///Users/benfrain/Documents/Storage/articles/rwd/code/ch8/example. 08-01/index.html 












ER fr, Ub EREBE EET, Rf EI REUS TAERE (我 选择 box-shadow 是 因 
为 它 不 会 像 porder 那 样 影响 元 素 的 页 面 布局 ), 在 通常 情况 下 , 悬 停 的 时 候 , 链接 会 从 状态 一 ( 没 
有 红线 ) 切换 到 状态 二 ( 带 有 红线 ); 它 看 起 来 像 一 个 开关 。 然 而 ， 以 下 这 行 代码 : 

transition: box-shadow 1s; 


在 pox-shadow 上 ， 将 会 耗 时 1 秒 ， 从 现存 状态 切换 到 悬 停 状态 。 








你 会 注意 到 ， 我 们 在 上 述 例子 的 CSS 中 使 用 了 相 邻 兄弟 选择 器 +。 这 表示 ， 

y 如 果 一 个 选择 器 ( 在 本 例 中 是 一 个 锚 标 记 ) 直接 跟随 另 一 个 选择 器 ( 另 一 个 锚 

Q 标记 )， 那 么 就 应 用 大 括号 内 的 样式 。 这 在 我 们 不 想 为 第 一 个 元 素 添加 左边 框 的 
时 候 十 分 有 用 。 























注意 ,在 CSS 中 过 渡 属 性 应 用 到 元 素 的 初始 状态 而 不 是 结束 状态 上 。 简 言 之 ， 过 渡 声 明 是 应 
用 在 from 状 态 而 不 是 to 状态 上 。 这 样 ， 不 同 的 状态 ， 比 如 :active， 也 可 以 有 不 同 的 样式 集 ， 
却 有 一 样 的 过 渡 。 
8.1.1 过 渡 相 关 的 属性 

过 渡 可 以 用 四 个 属性 声明 。 
口 








transition-property : 要 过 渡 的 CSS 属性 的 名 字 (i background-color 、 
text-shadow 或 者 a11，all 会 过 渡 所 有 可 以 过 渡 的 属性 )。 

transition-duration; 定义 过 渡 效 果 持 续 的 时 长 ( 用 秒 进行 定义 ,例如 .3s、2s 或 
1.5s )。 

D transition-timing-function: 定义 过 渡 期 间 的 速度 变化 (例如 ease、1linear、 
ease-in、ease-out、ease-in-out 或 者 cubic-bezier )。 


O transition-delay: 可 选用 于 定义 过 渡 开 始 前 的 延迟 时 间 。 相 反 ， 将 值 设 置 为 一 个 





口 
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负数 ， 可 以 让 过 渡 效 果 立 即 开始 ， 但 过 渡 旅 程 会 在 半路 结束 。 同 样 是 用 秒 进行 定义 ， 例 
如 .3s、2s 或 2.5s。 


单独 使 用 各 种 过 渡 属 性 创建 过 渡 效 果 的 语法 如 下 : 


.Style ( 

. (其 他 样式 ) ...*/ 
transition-property: all; 
transition-duration: 1s; 
transition-timing-function: ease; 
transition-delay: 0s; 








8.4.3 过渡 的 简写 语法 
我 们 可 以 把 这 些 独 自 声明 的 属性 组 合成 一 个 简写 版 : 


transition: all 1s ease 0sg; 


需要 注意 的 是 ， 当 使 用 简写 语法 的 时 候 ， 第 一 个 和 时 间 相 关 的 值 会 被 应 用 给 Eransition- 
duration, 而 第 二 个 则 会 被 应 用 到 transition- delay 上 。 Papin cim 因为 那样 
我 只 要 定义 过 渡 的 时 长 和 需要 过 渡 的 属性 即 可 。 


还 有 一 个 小 问题 : 定义 那些 你 真 的 需要 过 渡 的 属性 。 定 义 成 al1 是 十 分 方便 的 ， 但 是 如 果 你 
只 需要 过 渡 透 明度 ,那么 就 把 transition-property 设 成 cpacity， 和 否则 你 会 加 重 浏览 需 的 负 
担 。 在 大 部 分 情况 下 ,这 并 不 是 什么 大 问题 , 但 如 果 你 想 提供 最 佳 的 网 站 性 能 ， 特 别 是 在 老式 浏 
览 器 上 ， 每 一 个 小 点 都 需要 注意 。 




























































































过 渡 的 支持 度 非常 高 ， 但 是 和 以 往 一 样 ， 记 得 使 用 像 Autoprefixer 之 类 的 工 
有 具 来 添加 相应 的 浏览 器 私有 前 级 。 你 可 以 在 caniuse.com 上 查阅 浏览 器 的 支持 度 。 

a 简写 版 
过 渡 和 2D 变 形 在 除 IE9 及 更 旧版 本 之 外 的 浏览 器 上 都 能 正常 工作 。 除 了 IE9 


及 更 旧版 本 、Android 2.3 及 更 旧版 本 ， 以 及 Safari 3.2 及 更 旧版 本 外 ，3D 变 形 在 
其 余 所 有 浏览 器 上 都 能 正常 使 用 。 


8.4.3 在 不 同时 间 段 内 过 渡 不 同属 性 
当 一 条 规则 要 实现 多 个 属性 过 渡 时 ， 这 些 属性 不 必 步 调 一 致 。 看 看 下 面 这 段 代 码 : 


.Style ( 
/[* ... (其 他 样式 ) ... */ 
transition-property: border, color, text-shadow; 
transition-duration: 2s, 3s, 8s; 





H8 
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此 处 我 们 通过 transition-property 来 指定 过 渡 poraer 、color 和 text-shadow。 然 后 


在 transition-dura 


阴影 8 秒 。 由 逗号 分 隔 








tion 声 明 中 , 我 们 设 定 边 框 过 渡 效 果 应 该 2 秒 内 完成 、 文 字 颜 色 3 秒 、 文 字 
的 过 渡 持 续 时 间 按 顺序 对 应 上 面 的 CSS 属 性 。 














8.1.4 理解 过 渡 调 速 函 数 


声明 一 个 过 渡 时 ， 
Aki T o ease, li 





BHE, RERE ARAR DAE, EVE RROA REAREA 


near, ease-in, ease-out, ease-in-outfllcubic-bezierfBié4Wl 














么 用 的 呢 ? 其 实 它们 就 是 预 置 好 的 贝 塞 尔 曲 线 , JU EERIK. sc E OUR, WoecbyE 
在 数学 上 的 描述 。 可 视 化 这 些 曲线 通常 更 简单 ， 所 以 我 向 你 推荐 http:/cubic-beziercom/ 和 


http://easings.net/。 





这 两 个 网 站 可 以 让 你 去 对 比 各 种 调 速 函数 ， 查 看 它们 之 间 的 区 别 。 下 面 是 http:/easings.net/ 








的 截屏 ， 你 可 以 悬 停 在 每 条 线 上 来 观看 相应 的 演示 效果 。 








Objects in real life 
When we open a d 


easelnSine 


A 


easelnCubic 


NY. 


easelnQuint 


m 


easelnCirc 


a 





Easing functions specify the rate of change of a parameter over time. linear 


don't just start and stop instantly, and almost never move at a constant speed. 
rawer, we first move it quickly, and slow it down as it comes out. Drop something 
on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. 


This page helps you choose the right easing function. 


easeOutSine easelnOutSine easelnQuad easeOutQuad easelnOutQuad 
easeOutCubic easelnOutCubic easelnQuart easeOutQuart easelnOutQuart 
easeOutQuint easelnOutQuint easelnExpo easeOutExpo easelnOutExpo 


easeOutCirc easelnOutCirc easelnBack easeOutBack easelnOutBack 


E I LE UE 














不 过 ， 就 算 你 能 闭 着 眼睛 写 出 贝 塞 尔 曲线 ， 在 实际 使 用 中 ,也 不 会 有 什么 太 大 的 区 别 。 为 什 
么 呢 ? 和 其 他 增强 效果 一 样 ， 使 用 过 渡 效 果 时 也 需要 长 个 心眼 。 在 现实 中 , 如 果 过 渡 效 果 持 续 的 
时 间 过 长 ,会 让 人 感觉 网 站 很 慢 。 例 如 ， 导 航 链接 用 5 秒 来 完成 过 渡 ， 只 会 让 你 的 用 户 吕 娘 而 不 

















是 赞叹 。 感知 速度 对 月 




















日 户 来 说 非常 重要 ， 所 以 我 们 必须 让 网 站 和 应 用 尽 可 能 快 。 





因此 ， 除 非 有 什么 特殊 理由 ， 使 用 快速 的 ( 以 我 的 经 验 最 多 1 秒 ) 默认 过 渡 效 果 (ease ) fk 





往 是 最 好 的 。 
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8.1.5 响应 式 网 站 中 的 有 趣 过 渡 





你 小 时 候 有 没有 直到 过 这 种 情况 : 一 天 ,一 个 家 长 出 门 了 ， 然 后 男 外 一 个 家 长 对 你 说 :“ 既 
dA GR IATER, 我们 可 以 给 你 的 早餐 麦片 加 些 糖 ， 不 过 你 要 对 他 们 保守 秘密 哦 。” 我 对 这 件 

















事 可 是 十 分 内 次 啊 。 那 么 现在 让 我 们 来 给 自己 加 点 糖 。 当 没有 人 看 到 的 时 候 , 我 们 来 做 点 有 趣 的 
事情 。 我 并 不 支持 你 在 生产 环境 中 这 么 做 ,但 是 你 可 以 在 你 的 响应 式 项 目 中 加 上 这 名 代码 : 


st 
transition: all 1s; 




















} 


此 处 ,我 们 使 用 CSS 通 配 选 择 器 * 来 选择 页 面 的 所 有 元 素 ， 然 后 为 所 有 元 素 都 设置 一 个 耗 时 1 
秒 的 过 渡 效 果 。 声 明 中 省 略 了 过 渡 调 速 柚 数 ， 浏 览 器 默认 会 使 用 ease; 声明 中 同样 省 略 了 延迟 时 
间 ， 浏 览 器 会 默认 使 用 none， 所 以 过 渡 效 果 不 会 有 延迟 。 最 终 效 果 会 是 怎样 的 呢 ? 试 着 调整 济 
览 絮 窗口 大 小 ， 大 多 数 效果 ( 超 链接 、 悬 停 状态 等 ) 和 你 所 期 望 的 一 样 。 不 过 ， 因 为 所 有 元 素 都 
被 应 用 了 过 渡 ， 自 然 也 就 包括 媒体 查询 中 的 规则 ,所 以 当 浏览 器 窗 中 大 小 发 生变 化 时 ， 页 面 元 素 
将 从 一 种 排列 方式 过 渡 为 另 一 种 排列 方式 。 必 须 这 么 做 吗 ? 当然 不 是 ! 但 这 种 效果 是 不 是 既 好 看 
又 好 玩 ? 没 错 ! 好 吧 ， 现 在 趁 妈 妈 没 注意 到 ， 把 规则 去 掉 吧 。 

































































8.2 CSS 的 2D 变形 


虽然 两 个 英文 单词 发 音 相似 ， 但 CSS 变 形 (transformation， 包 括 2D 变 形 和 3D 变 形 ) 和 CSS 过 
渡 (transition) 完全 不 同 。 可 以 这 么 理解 : 过渡 是 从 一 种 状态 平滑 转换 到 男 一 种 状态 ， 而 变形 则 
定义 了 元 素 将 会 变 成 什么 样子 。 我 自己 (极其 幼稚 ) 的 理解 是 这 样 的 : 想象 一 下 《变形 金刚 》 里 
的 擎 天 柱 ， 他 通过 变形 来 变 成 一 部 卡车 。 而 在 机 器 人 与 卡车 之 间 的 阶段 ,我 们 称 之 为 过 渡 (从 一 
个 状态 过 渡 到 男 一 个 状态 )。 


如 果 你 不 知道 谁 是 擎 天 柱 ， 那 么 就 把 最 后 几 个 句子 忽略 吧 。 和 希望 一 切 很 快 就 会 变 得 明晰 。 


可 用 的 CSS3 变 形 有 两 种 : 2D 和 3D。2D 变 形 的 实现 更 广泛 , 浏览 器 支持 更 好 ， 写 起 来 也 更 简 
单 。 所 以 我 们 先 看 看 2D 变 形 。CSS3 的 2D 变 形 模块 允许 我 们 使 用 下 列 变形 。 


O scale: 用 来 缩放 元 素 (放大 和 缩小 ) 

Q translate: 在 屏幕 上 移动 元 素 (上 下 左右 ) 
O rotate: 按照 一 定 角度 旋转 元 素 ( 单位 为 度 ) 
O skew: 沿 X 和 Y 轴 对 元 素 进 行 斜 切 

O matrix: 允许 你 以 像素 精度 来 控制 变形 效果 
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a 要 记 住 ， 变 形 是 在 文档 流 外 发 生 的 。 一 个 变形 的 元 素 不 会 影响 它 附 近 未 变 


形 的 元 素 的 位 置 。 


让 我 们 试 试 各 种 2D 过 渡 。 你 可 以 在 浏览 器 打开 example_08-02 来 测试 。 在 每 个 变形 之 间 我 都 
添加 了 过 渡 ， 让 你 更 直观 地 了 解 发 生 了 什么 。 








8.2.1 scale 


下 面 是 scale 的 语法 : 





.Scale:hover { 
transform: scale(1.4); 


} 
在 scale 链 接 上 悬 停 来 观看 效果 : 





scale(1.4) ranslate(-20px, -20px) 














我 们 已 经 告知 了 浏览 器 ， 当 鼠标 悬 停 在 该 元 素 上 时 ,我们 希望 元 素 放 大 到 原始 大 小 的 1.4 倍 。 


除了 我 们 刚才 使 用 的 用 来 放大 元 素 的 数值 ， 我 们 还 可 以 使 用 小 于 1 的 数值 来 缩小 元 素 。 下 面 
的 代码 会 将 元 素 缩小 一 半 : 


transform: scale(0.5); 


8.22 translate 





下 面 是 translate 的 语法 : 


.translate:hover { 
transform: translate(-20px, -20px); 


) 
下 面 是 我 们 例子 中 的 效果 展示 : 








, translate(-20px, -20px) 


scale(1.4 


rotate(30deg) 
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translate 会 告知 浏览 器 按照 一 定 的 度量 值 移动 元 素 , 可 以 使 用 像素 或 者 百分比 。 语 法 中 定 
义 的 第 一 个 值 是 X 轴 上 偏 移 的 距离 ， 第 二 个 是 Y 轴 上 偏 移 的 距离 。 正 值 会 让 元 素 向 右 或 者 向 下 移 
动 ， 负 值 则 会 让 元 素 向 左 或 者 向 上 移动 。 


如 果 你 只 传 入 一 个 值 ， 它 会 被 应 用 到 X 轴 上 。 如 果 你 想 指 定 一 个 轴 进 行 移动 ， 可 以 使 用 


translatex 或 者 translateY。 














使 用 translate 来 居中 绝对 定位 的 元 素 


translate 提 供 了 十 分 有 用 的 方法 来 在 相对 定位 的 容器 中 居中 绝对 定位 元 素 。 你 可 以 查看 
example 08-03。 


看 下 列 标记 : 





«div class="outer"> 
<div class="inner"></div> 
</div> 


然后 是 CSS 代 码 : 

















.outer { 
position: relative; 
height: 400px; 
background-color: #f90; 
} 


.inner ( 
position: absolute; 
height: 200px; 
width: 200px; 
margin-top: -100px; 
margin-left: -100px; 
top: 50$; 
left: 50$; 

) 


你 也 许 也 做 过 类 似 的 事情 。 当 绝对 定位 的 元 素 的 尺寸 已 知 时 ( 本 例 中 是 200 像 素 x 2001 
素 ), 我 们 可 以 使 用 负 的 margin 来 将 它 拉 到 中 间 。 然 而 不 知道 元 素 的 高 度 时 怎么 办 呢 ? 变形 他 
出 了 援手 。 


证 我 们 在 内 部 容器 里 随机 加 些 内 容 。 
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好 ， 现 在 让 我 们 使 用 transform 来 解决 一 下 问题 。 
.inner { 
position: absolute; 
width: 200px; 
background-color: #999; 
top: 50$; 
left: 50$; 
transform: translate(-50$, -50%); 
} 
下 面 是 结果 
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此 时 , top 和 1eft 的 值 使 内 部 容器 的 左上 角 位 于 其 父 容器 的 正中 间 。 然后 transform 让 其 在 
对 应 轴 上 反 向 移动 自己 宽 高 的 一 半 ， 从 而 达到 居中 的 效果 。 





8.23 rotate 
rotate 人 允许 你 旋转 一 个 元 素 ， 语 法 如 下 : 
.rotate:hover { 

transform: rotate(30deg); 


) 
在 浏览 需 上 结果 如 下 : 


scale(1.4) | translate(-20px, -20px) 





括号 中 的 值 只 能 以 度 为 单位 ( 如 90deg ) 正 值 时 会 进行 顺 时 针 旋 转 , 而 负 值 则 会 逆 时 针 旋转 。 
当然 ， 你 也 可 以 让 元 素 这 么 转 : 


transform: rotate(3600deg); 
这 会 让 元 素 旋转 整整 10 圈 。 这 个 值 使 用 的 次 数 寥寥 可 数 ， 除 非 你 给 一 家 风车 公司 设计 网 站 ， 
这 倒 有 可 能 会 派 上 用 场 。 





W 


8.2.4 skew 


如 果 你 多 少 有 点 Photoshop 经 验 ， 就 会 知道 skew (PHI ) 是 怎么 回 事 ， 它 会 让 元 素 在 一 个 或 
者 两 个 轴 上 变形 偏 斜 。 下 面 是 本 例 中 的 代码 : 











.Skew:hover ( 
transform: skew(40deg, 12deg); 
} 


在 悬 停 状 态 的 导航 链接 上 应 用 该 规则 ， 产 生 的 效果 如 下 : 











nslate(-20px, -20px) | rotate(30deg) 
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第 一 个 值 是 X 轴 上 的 斜 切 〈 本 例 中 是 40 度 )， 第 二 个 值 是 Y 轴 上 的 斜 切 (本 例 中 是 12 度 )。 忽 
略 第 二 个 值 意味 着 仅 有 的 值 只 会 应 用 在 X 轴 上 【水 平方 向 )。 例如: 


transform: skew(10deg); 


8.2.5 matrix 


好 了 ， 现 在 该 聊 聊 那个 被 严重 高 估 的 电影 了 了 ? 什么 电影 ”你 想 知道 的 是 CSS3 中 的 matrix 
而 不 是 电影 ? 好 吧 …… 


我 不 打算 说 谎 了 。 我 觉得 matrix (JERE) 变形 的 语法 超级 复杂 。 下 面 是 示例 代码 : 




















.matrix:hover { 
transform: matrix(1.678, -0.256, 1.522, 2,333, -51.533, -1.989); 
j 


它 基 本 上 能 让 你 将 其 他 变形 (scale. rotate. skew^R) 组 合成 单个 声明 。 上 面 的 声明 在 
浏览 器 产生 的 效果 如 下 : 








skew(40de- ` 
































总 的 来 说 , 我 还 是 亦 喜 欢 挑战 难题 的 ,但 是 我 相信 你 也 会 同意 这 语法 太 有 挑战 性 了 。 对 于 我 
来 说 ， 在 看 了 规范 文档 之 后 问题 更 难 了 ， 要 完全 理解 矩阵 得 了 解 相关 的 数学 知识 : 
https://www.w3.org/TR/css3-2d-transforms/ o 





I Je RARE RAE A ml BE 5 HU FAE M JavaScript £o isl, TAE S RS AE E 

Q 稍微 熟悉 一 点 儿 。 这 是 变形 的 计算 语法 ， 如 果 你 用 JavaScript 获 取 当前 动画 状态 ， 
ART BARBA, 

傻瓜 式 的 矩阵 变形 工具 





无 论 怎么 想象 ,我 都 不 是 一 个 数学 家 ,所 以 当 我 需要 创建 矩 阵 变形 时 ,我 一 般 都 走 捷径 。 如 
果 你 的 数学 也 不 太 好 ， 我 建议 你 访问 这 里 : http:/www.useragentman.com/matrix/。 


Matrix Construction Set 这 个 网 站 可 以 让 你 精确 地 拖 放 元 素 ， 然 后 它 会 自动 生成 完美 的 矩阵 代 








(D Matrix 即 电影 《黑客 帝国 》 一 一 译 者 注 
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码 (代码 中 包含 了 浏览 器 私有 前 缀 )。 


8.2.6 transform-origin 属性 


注意 在 CSS 里 ， 默 认 的 变形 原点 (浏览 器 中 作为 变形 中 心 的 点 ) 是 在 正中 心 : 元 素 X 轴 的 50% 
和 Y 轴 的 50% 处 。 这 和 SVG 默认 的 左上 角 (或 者 0 o) 是 不 同 的 。 


使 用 transform-origin， 我们 可 以 修改 变形 原点 。 


回想 一 下 我 们 先前 的 矩阵 变 行 。 默 认 的 trans form-origin 是 50% 50% ( 元 素 的 正中 心 )。 
Firefox 的 开发 者 工具 展示 了 transform 是 如 何 工 作 的 : 












































现在 ， 我 们 来 调整 一 下 trans form-origin: 


.matrix:hover { 
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); 
transform-origin: 270px 20px; 


) 
然后 你 就 会 发 现 效果 大 概 如 下 : 








skew(40deg, 12de 





ge 





























第 一 个 值 是 水 平方 向 上 的 偏 移 量 , 第 二 个 值 是 垂直 方向 上 的 偏 移 量 。 你 可 以 使 用 关键 词 。 例 
如 ，1left 等 于 水 平方 向 上 使 用 0%，right 等 于 水 平方 向 上 使 用 100%，top 等 于 在 垂直 方向 上 使 
用 0%， 而 bottom 等 于 在 垂直 方向 上 使 用 100%。 或 者 你 可 以 使 用 其 他 长 度 ， 使 用 任意 的 CSS 长 度 
单位 。 

如 果 你 对 eransform-origin 使 用 了 百分比 ,那么 水 平 /垂直 偏 移 量 都 是 相对 于 元 素 的 宽 高 
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如 果 你 使 用 长 度 ,那么 它们 会 相对 元 素 左上 角 计 算 该 点 位 置 。 


你 可 以 访问 https://www.w3.org/TR/css2-2d-transforms/ 获 取 更 多 关于 transform-origin 
性 的 信息 。 


以 上 讲述 了 2D 变 形 的 基本 要 素 。 比 起 3D 变 形 ，2D 变 形 在 浏览 器 中 被 广泛 地 支持 ;与 绝对 定 
位 等 旧 方 法 相 比 ， 它 为 我 们 提供 了 一 种 更 好 的 方法 来 在 屏幕 上 移动 元 素 。 


CSS3 的 2D 变 形 模块 的 完整 规范 文档 请 见 : https://www.w3.org/TR/css2-2d-transforms/。 





38] 





如 果 想 更 多 地 了 解 用 transform 移 动 元 素 的 好 处 ， 可 以 阅读 Paul Irish 的 文 

Æ ( http//www.paulirish.com/2012/why-moving-elements-with-translate-is-better- 
M than-posabs-topleft/ ). 

Q 另外 ， 如 果 想 了 解 浏 览 器 如 何 处 理 过 渡 和 动画 ， 以 及 为 什么 变形 会 如 此 高 

效 , 我 强烈 推荐 你 阅读 以 下 文章 : http://blogs.adobe.com/webplatform/2014/03/18/ 


css-animations-and-transitions-performance/。 


8.3 CSS3 的 3D 变形 

来 观看 一 下 我 们 的 第 一 个 示例 。 当 我 们 悬 停 在 一 个 元 素 上 时 ， 该 元 素 翻转 。 我 在 此 处 使 用 
hover 来 触发 变化 ， 是 因为 它 很 容易 展现 出 来 。 但 是 这 个 翻转 动作 也 可 以 通过 类 的 改变 (由 
JavaScript 触 发 的 ) 或 者 一 个 元 素 被 聚焦 等 方式 触发 。 

我 们 有 两 个 元 素 : 一 个 水 平 翻转 元 素 和 一 个 垂直 翻转 元 素 。 你 可 以 观看 example 08-04 查 看 


最 终 效果 。 图片 并 不 能 充分 展示 元 素 如 何 从 绿色 面 转向 红色 面 , 也 不 能 展示 出 它们 是 如 何 产生 3D 
效果 的 ， 但 还 是 希望 下 面 这 幅 截屏 能 让 你 对 其 有 所 了 解 。 






































M 有 一 个 小 技巧 ， 在 某 些 浏览 器 中 ， 绝 对 定位 只 能 逐 像 素 操 作 ， 而 变形 可 以 
Q 实现 比 一 像素 更 精确 的 定位 。 
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下 面 是 翻转 元 素 的 相关 代码 : 


«div class-"flipper"» 
«span class-"flipper-object flipper-vertical"'» 
<span class="panel front"»The Front«/span» 
«span class="panel back"»The Back«/span» 
</span> 
</div> 


水 平 翻转 元 素 和 垂直 翻转 元 素 的 唯一 区 别 就 是 用 flipper-horizontal 类 替代 了 flipper- 


vertical 类 。 





由 于 大 部 分 样式 涉及 美学 部 分 , 因此 我 们 这 里 只 看 那些 生成 翻转 效果 所 必 不 可 少 的 部 分 。 如 
果 想 了 解 详细 的 样式 ， 可 以 查看 示例 中 的 样式 表 。 


首先 , 我 们 要 为 .f1ipper-object 的 父 元 素 设 置 透视 ,我 们 使 用 perspective 属 性 来 实现 。 
这 个 属性 设置 了 用 户 视点 到 3D 场 景 的 距离 。 
如 果 你 设置 了 一 个 比较 小 的 值 ， 如 20px， 那 么 3D 空 间 会 延伸 到 距离 屏幕 只 有 20px 处 ， 这 会 


导致 一 个 非常 明显 的 3D 效 果 。 如 果 设 置 一 个 比较 大 的 值 ， 那 就 意味 着 3D 空 间 离 屏幕 很 还 ，3D 效 
果 会 没有 那么 明显 。 



































.flipper ( 
perspective: 400px; 
position: relative; 


} 
我 们 将 父 元 素 设置 为 相对 定位 ， 从 而 创造 一 个 上 下 文 来 放置 flipper-object。 


.flipper-object { 
position: absolute; 
transition: transform 1s; 
transform-style: preserve-3d; 


} 


除了 将 .f1ipper-object 元 素 用 绝对 定位 的 方式 定位 在 父 元 素 的 左上 角 ( 绝对 定位 元 素 
的 默认 位 置 ) 外 ， 我 们 还 为 变形 添加 了 过 渡 效 果 。 而 创建 3D 效 果 的 关键 点 是 transform- 
styles:preserve-3d。 这 告诉 浏览 器 ， 当 我 们 要 为 这 个 元 素 创造 变形 效果 时 ， 它 的 子 元 素 
也 保持 3D 效 果 。 


如 果 我 们 不 在 .fl1ipper-object 上 设置 preserve-3d， 就 永远 都 看 不 到 翻转 元 素 的 背面 
(红色 部 分 )。 你 可 以 在 https://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/ 上 阅读 相关 
规范 。 
翻转 元 素 中 的 每 个 面板 都 会 被 定位 到 容器 的 顶部 。 但 是 我 们 不 想 在 翻转 的 时 候 看 到 元 素 的 
“屁股 ”( 否则 我 们 将 永远 看 不 到 绿色 面板 , 因为 它 在 红色 面板 的 “后 面 " ), 要 防止 这 种 情况 出 现 ， CE 
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我 们 需要 使 用 backface-visibility 属 性 。 我 们 把 它 设 置 为 hidaaen 来 隐藏 元 素 的 背面 ; 

















panel ( 
top: 0; 
position: absolute; 
backface-visibility: hidden; 


我 发 现 backface-visibility 在 某 些 浏览 器 上 会 有 些 令 人 惊讶 的 副作用 。 
y 它 对 于 提高 旧式 安 草 设备 上 的 fixeq 定 位 元 素 的 性 能 十 分 有 帮助 。 你 可 以 阅读 
Q https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/ 和 https://benfrain. 


comyimproving-css-performance-fixed-position-elements/ 来 了 解 更 多 。 





接 下 来 , 我 们 想 让 我 们 的 背面 面板 默认 就 是 翻转 的 ( 所 以 当 我 们 翻转 整个 元 素 的 时 候 , 它 能 
够 出 现在 正确 的 位 置 )。 为 了 达到 这 个 效果 ， 我 们 使 用 rotate 变 形 : 





.flipper-vertical .back ( 
transform: rotateX(180deg); 
} 


.flipper-horizontal .back { 
transform: rotateY(180deg); 
} 


现在 万 事 俱 备 ， 我 们 和 希望 当 我 们 悬 停 在 外 部 元 素 的 时 候 ， 整 个 内 部 元 素 都 会 有 翻转 的 效果 : 








.flipper:hover .flipper-vertical ( 
transform: rotateX(180deg); 
} 


.flipper:hover .flipper-horizontal { 
transform: rotateY(180deg); 
} 


你 马上 会 想到 许多 使 用 它 的 场景 。 如 果 你 好 奇 怎么 用 它 来 实现 一 个 新 奇 的 导航 效果 ， 又 或 者 
想 实 现 一 个 屏 外 菜单 ， 我 推荐 你 访问 : http:/tympanus.net/Development/PerspectivePage View- 
Navigation/index.html。 











总 想 了 解 最 新 的 CSS Transforms Module Level 1 规范 ， 可 以 访问 https://drafts. 


csswg.org/css-transforms/ o 


transform3d 属性 


除了 使 用 perspective 外 ， 我 还 发 现 了 transform3d 这 个 有 用 的 属性 。 在 这 个 简单 的 属性 
里 ， 你 可 以 在 X 轴 ( 左 / 右 )、Y 轴 (上 /下 )、Z 轴 (前 /后 ) 上 移动 元 素 。 让 我 们 在 上 一 个 例子 中 加 























éd 
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入 transform3d 变 形 。 你 可 以 在 example_08-06 上 观看 效果 。 
除了 为 元 素 增加 了 一 点 padding 外 ， 下 面 是 与 上 例 代 码 中 的 唯一 区 别 : 


.flipper:hover .flipper-vertical ( 
transform: rotateX(180deg) translate3d(0, 0, -120px); 
animation: pulse 1s 1s infinite alternate both; 
} 
.flipper:hover .flipper-horizontal { 
transform: rotateY(180deg) translate3d(0, 0, 120px); 


animation: pulse 1s 1s infinite alternate both; 


} 


我 们 依旧 使 用 变形 , 但 这 一 次 , 除了 rotate 外 , 我 们 还 增加 了 translate3d。translate3d 
中 逗号 分 隔 的 三 个 参数 分 别 是 X 轴 上 的 偏 移 、Y 轴 上 的 偏 移 、Z 轴 上 的 偏 移 。 


在 这 两 个 例子 中 ， 我 并 没有 在 X 轴 ( 左右) 和 Y 轴 CEF) 上 改变 元 素 的 位 置 ， 我 改变 的 是 
元 素 到 你 的 视点 的 距离 。 


在 顶部 的 例子 中 你 会 发 现 按钮 翻转 到 背面 ,并 且 离 屏幕 近 了 120 像 素 ( 负 值 将 元 素 拉 向 了 你 )。 




















而 另 一 个 元 素 则 在 水 平 旋转 后 离 原来 的 位 置 远 了 120 像 素 。 














Q 想 了 解 关 于 translate3d 的 规范 ， 你 可 以 访问 https:/www.w3.org/TR/css3- 


3d-transforms/。 
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使 用 变形 实现 渐进 增强 


我 发 现 Eransform3a 的 最 大 用 处 在 于 将 面板 移入 移出 屏幕 ， 尤 其 是 如 “ 离 屏 ”导航 模式 。 
如 有 果 你 打开 example_08-07， 会 看 到 我 编写 了 一 个 基本 的 、 渐 进 增强 的 离 屏 导航 模式 。 


当 你 需要 使 用 JavaScript 和 现代 CSS 功 能 ( 如 变形 ) 来 制造 交互 效果 的 时 候 ， 尽 可 能 考虑 一 下 
低级 设备 的 支持 性 问题 。 如 果 那 些 用 户 不 支持 JavaScript 呢 ? 如 果 JavaScript 在 加 载 或 者 执行 的 时 
候 遇 到 了 问题 呢 ? 又 或 者 某 些 人 的 设备 不 支持 transform (例如 Opear Mini) ? 不 要 担心 ， 只 要 
做 一 点 点 努力 ， 就 有 可 能 保证 我 们 的 界面 最 终 能 够 应 付 所 有 的 不 测 。 


在 制作 这 种 交互 模式 的 时 候 ， 我 发 现 最 有 用 的 办 法 是 从 最 低级 的 功能 开始 ， 逐 步 增强 。 所 
以 ,首先 为 不 能 使 用 JavaScript 的 情况 进行 搭建 。 毕 竞 这 种 状况 下 ， 如 果 你 的 菜单 展示 需要 依赖 
JavaScript， 将 菜单 放置 在 屏幕 外 会 导致 用 户 不 能 使 用 你 的 菜单 。 于 是 我 们 将 菜单 标签 直接 放 在 
文档 流 中 的 导航 区 域 里 。 这 样 ， 在 最 坏 的 情况 下 ， 用 户 也 可 以 滚动 到 页 脚 ， 点 击 他 们 想 要 切换 
的 标签 。 























Abasic off-canvas menu 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 














如 果 JavaScript 是 可 用 的 , 在 小 屏幕 下 , 我 们 会 把 菜单 “ 拉 ” 到 左 侧 。 当 菜单 按钮 被 点 击 的 时 
候 ， 我们 会 在 body 标 签 上 添加 一 个 类 ( 通过 JavaScript )， 然 后 把 这 个 类 作为 钩子 ， 从 而 驱动 CSS 
将 这 个 导航 区 域 展 示 出 来 。 
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-Canvas menu 


it amet, consectetur adipisicing elit, 
bor incididunt ut labore et dolore 

m ad minim veniam, quis nostrud 
laboris nisi ut aliquip ex ea 

. Duis aute irure dolor in 

ptate velit esse cillum dolore eu 
xcepteur sint occaecat cupidatat 
culpa qui officia deserunt mollit 








在 大 屏幕 下 ， 我 们 收 起 菜单 按钮 ， 将 导航 区 放置 在 左 侧 ， 并 且 调 整 主 内 容 区 域 从 而 适应 它 。 





A basic off-canvas menu 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 











然后 ， 我 们 逐步 优化 导航 的 展示 / 收 起 效果 。 这 就 是 Modernizr 之 类 的 工具 实 至 名 归 的 地 方 ; 
E i. TEFESXRAA-Y- (在 第 $ 章 我 们 对 Modernizr 做 过 详细 的 介绍 


首先 ， 对 于 那些 只 支持 translate 变 形 的 浏览 器 (例如 老式 的 安 卓 浏览 器 )， 使 用 简单 的 
translatex: 
.js .csstransforms .navigation-menu { 
left: auto; 


transform: translateX(-200px); 


} 


而 对 于 支持 translate3d 的 浏览 器 ， 我 们 则 使 用 trans1late3gd 代 蔡 。 一 旦 支持 ， 这 种 方法 
的 性 能 表现 会 更 好 ， 这 得 益 于 大 多 数 设备 上 的 图 像 处 理 器 。 
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.js .csstransforms3d .navigation-menu ( 
left: auto; 
transform: translate3d(-200px, 0, 0); 
} 


使 用 渐进 增强 的 开发 方式 可 以 确保 尽 可 能 多 的 用 户 享受 到 可 用 的 设计 效果 。 WE, 你 的 用 户 
可 能 不 需要 优秀 的 视觉 体验 ， 但 是 要 确保 应 用 的 可 用 性 。 





8.4 CSS3 动画 效果 


如 果 你 使 用 过 Flash Final Cut Pro 或 者 After Effects 之 类 的 软件 , 那么 CSS3 动 画 你 也 能 迅速 上 
手 。CSS3 中 沿用 了 基于 时 间 线 的 应 用 程序 中 广泛 使 用 的 动画 关键 帧 技术 。 


相 较 于 3D 变 形 ，CSS3 动 画 的 支持 度 更 高 。Firefox $S+、Chrome 、Safari 4+、Android ( 所 有 版 
Ak). iOS (所 有 版 本 ) 和 IE10+ 都 支持 。CSS3 动 画 由 两 部 分 组 成 : 首先 是 关键 帧 声明 ， 然 后 是 在 
动画 属性 中 使 用 该 关键 帧 声明 。 下 面 让 我 们 来 看 一 看 。 


在 上 一 个 例子 中 ,我 们 利用 变形 和 过 渡 制 作 了 简单 的 翻转 效果 。 接 下 来 ,我 们 将 利用 本 章 学 
到 的 所 有 知识 为 其 加 上 动画 效果 。 在 下 一 个 示例 ， 即 example_ 08-05 中 ， 我 们 将 在 元 素 翻 转 后 为 
其 添加 脉冲 动画 效果 。 


首先 ， 我 们 创建 一 个 关键 帧 规则 : 


Gkeyframes pulse { 
100$ ( 
text-shadow: 0 0 5px #bbb; 
box-shadow: 0 0 3px 4px #bbb; 
} 
j 
如 你 所 见 , 在 ekeyframe 关 键 词 后 我 们 定义 了 一 个 新 的 关键 帧 规则 , 并 且 给 这 个 动画 命 了 名 
[ 在 这 个 例子 中 是 pulse ( 脉冲 ) ]。 


一 般 情 况 下 , 最 好 使 用 一 个 能 代表 动画 效果 的 名 字 , 因为 一 个 关键 帧 声明 可 以 在 项 目 中 多 处 
复 用 o 


我 们 在 这 里 只 定义 了 一 个 简单 的 关键 帧 选择 器 : 100%。 然 而 ， 你 也 可 以 设置 多 个 关键 帧 选 
择 器 (用 百分比 定义 )。 你 可 以 把 它们 想象 成 时 间 轴 上 的 点 。 例 如 ，10% 的 时 候 背 景 变 成 蓝 色 ， 
30% 的 时 候 背 景 变 成 紫色 ，60% 时 让 元 素 变 得 半 透 明 ,， 等 等 。 如 果 你 需要 的 话 ， 还 有 等 价 于 0% 和 
100% 的 关键 词 。 你 可 以 这 样 使 用 : 




















































































































Gkeyframes pulse { 
tö t 
text-shadow: 0 0 5px #bbb; 
box-shadow: 0 0 3px 4px #bbb; 
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} 
} 


然而 要 提醒 一 下 ，WebKit 内 核 的 浏览 器 (iOS, Safari) 对 from 和 to 的 支持 不 是 十 分 好 (更 
喜欢 0 和 100s )， 所 以 我 推荐 你 使 用 百分比 关键 帧 选择 器 。 


你 会 注意 到 我 们 并 没有 费心 去 定义 起 点 。 这 是 因为 起 点 就 是 这 个 属性 所 在 的 状态 。 你 可 以 通 
过 https://www.w3.org/TR/css3-animations/ 了 解 规范 。 












































如 果 0% 或 者 from 关 键 帧 没有 被 指定 ， 那 么 用 户 代理 会 利用 被 添加 动画 的 属 
性 ,计算 出 相关 的 值 来 构建 08 关 键 帧 。 同 样 ,如 果 100g 或 者 Lo 关键 帧 未 被 定义 ， 
S 用 户 代理 也 会 计算 出 相应 的 关键 帧 。 如 果 定 义 了 负 值 或 者 大 于 100% 的 关键 帧 ， 
它 会 被 忽略 。 





在 这 个 关键 帧 声明 中 ， 我 们 在 100% 处 添加 了 文字 阴影 与 盒 阴 影 。 我 们 可 以 预期 到 ， 这 个 动 
画 被 使 用 后 , 元素 会 动态 添加 相应 的 文字 阴影 和 盒 阴 影 。 但 是 这 个 动画 会 持续 多 和 久 呢 ? 我 们 怎么 
定义 它 重复 播放 、 翻 转播 放 或 者 其 他 我 希望 的 播放 方式 ?下 面 是 我 们 使 用 关键 帧 动画 的 方法 : 

.flipper:hover .flipper-horizontal { 

transform: rotateY(180deg); 


animation: pulse 1s 1s infinite alternate both; 


} 


此 时 的 animation 属 性 使 用 了 缩写 语法 。 在 本 例 中 , 我 们 实际 定义 了 (依照 定义 顺序 ) 使 用 
的 关键 帧 规则 的 名 字 (pulse )、 动 画 持续 时 长 (is )、 动 画 开始 延迟 (1s， 给 予 按钮 足够 的 时 长 
用 于 翻转 )、 动 画 运行 的 次 数 (infinite, ARR) HMR (alternate, ZË, MA 
动画 轮流 往复 地 播放 )， 最 后 我 们 想 让 animation-fil1-modqe 保 留 动画 中 无 论 是 顺序 播放 还 是 
倒序 播放 后 的 值 (both )。 


缩写 属性 实际 上 可 以 接受 全 部 七 个 动画 属性 。 除 了 前 面 说 的 ,还 可 以 指定 animation-play- 
state。 这 个 属性 可 以 被 设置 为 running 和 paused 来 运行 或 者 暂停 动画 。 当 然 ， 你 可 以 不 采用 
缩写 模式 ; 有 的 时 候 分 别 设置 属性 会 更 易 懂 ( 帮助 你 在 日 后 重 温 代码 )。 下 面 是 各 个 属性 的 正确 
写法 ， 可 选 的 值 已 用 | 分 隔 表 示 。 




































































.animation-properties { 
animation-name: warning; 
animation-duration: 1.5s; 
animation-timing-function: ease-in-out; 
animation-iteration-count: infinite; 
animation-play-state: running | paused; 
animation-delay: 0s; 
animation-fill-mode: none | forwards | backwards | both; 


animation-direction: normal | reverse | alternate | alternatereverse; 
} 
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如 果 你 想 了 解 每 个 动画 属性 的 完 


css3-animations/。 


整定 义 ， 可 以 访问 https:/www.w3.org/TR/ 








正如 前 面 提 到 的 一 样 , 你 可 以 在 其 他 元 素 上 复 用 已 经 声明 的 关键 帧 规则 , 并 且 可 以 使 用 完 


不 同 的 设置 : 


.flipper-vertical ( 
rotateXx(180deg); 


.flipper:hover 
transform: 
animation: 

alternate both; 

} 


上 例 将 在 2 秒 内 运行 pulse 动 画 效果 ， 并 日 使 月 





























pulse 2s 1s cubic-bezier(0. 


| 








68, -0.55, 0.265, 1.55) 5 


HI ease-in-out-backJIWEE PRG (使 用 贝 塞 


尔 曲线 定义 的 )。 它 会 按照 顺序 逆序 各 播放 五 次 。 在 示例 中 ， 我 们 在 垂直 翻转 的 元 素 上 使 用 了 这 


H, 
No 


OELE 


这 只 是 一 个 简单 的 CSS 动 画 的 例子 。 但 是 基 











本 任何 动画 都 可 以 有 








关键 帧 实现 ， 因 此 这 个 可 能 








性 是 无 限 的 。 有 兴趣 的 话 ， 可 以 阅读 CSS3 动 画 的 最 新 发 展 : http://dev.w3.org/csswg/css3- 


animations/。 


animation-fill-mode 属性 


animation-fill -mode 属 性 值得 一 提 。 想 象 一 


红色 背景 。 你 可 以 观看 example 08-08。 











我 们 使 用 了 下 面 的 动画 设置 : 
.background-change { 
animation: fillBg 3s; 
height: 200px; 
width: 400px; 
border: 1px solid #ccc; 


} 


Gkeyframes fillBg ( 
0$ ( 


background-color: yellow; 
j 
100$ ( 

background-color: red; 


j 
} 


然而 ,一 旦 动画 结束 ，div 的 


db Ed, 人 
背景 会 


变 成 透明 。 
们 可 以 使 用 animation-fill1-mode 和 窗 盖 这 种 行为 。 





1 
A 


F, 一 个 动画 花 了 三 秒 钟 从 黄色 背景 变化 为 




















这 是 因为 默认 原则 是 动画 内 外 互 不 干涉 。 我 
在 本 例 中 ， 我 们 使 用 了 : 
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animation-fill-mode: forwards; 
这 指使 元 素 保留 动画 结束 时 的 值 。 在 本 例 中 ，daiv 的 背景 会 在 动画 结束 后 保持 为 红色 。 如 果 
想 了 解 更 多 关于 animation-fill-mode 属 性 的 资料 ， 可 以 访问 https:/www.w3.org/TR/css3- 


animations/Zanimation-fill-mode-property 。 











不 设置 animation-fill-mode 


将 animation-fill-mode 设 置 为 forwards 














8.5 小结 


有 关 CSS 变 形 、 过 渡 和 动画 的 内 容 ， 足 足 可 以 写 好 几 本 书 。 但 是 我 希望 通过 本 章 晴 峰 点 水 般 
的 学 习 ， 你 能 了 解 它 们 的 基本 知识 并 利用 起 来 。 其 实 ， 我们 采用 CSS3 新 特性 和 技巧 的 最 终 目 的 ， 
是 想 使 用 CSS 来 蔡 代 JavaScript 制 作 一 些 优雅 精美 的 增强 效果 ， 让 响应 式 设计 更 加 简洁 和 丰富 。 


本 章 我 们 学 习 了 什么 是 CSS3 过 渡 ， 以 及 如 何 编写 相应 的 代码 。 了 解 了 ease、lineaz 等 调 速 
函数 ， 并 且 使 用 它们 制作 了 简单 有 趣 的 效果 。 还 学 习 了 缩放 、 和 斜 切 等 2D 变 形 ， 以 及 如 何 将 它们 
与 过 渡 组 合 使 用 。 此 外 , 还 简单 了 解 了 3D 变 形 ， 然 后 学 习 了 CSS 动 画 的 强大 功能 与 简洁 语法 。 你 
要 相信 自己 的 CSS3 功 力 正在 不 断 增长 。 


但 是 ， 如 果 网 站 设计 中 有 一 个 领域 是 我 尽 可 能 避免 谈 及 的 , 那 肯定 就 是 表单 。 我 不 知道 为 什 
么 ， 只 是 一 直觉 得 制作 表单 是 件 单调 乏味 的 事 。 当 我 知道 HTML5 和 CSS3 可 以 让 表单 的 制作 、 美 
化 甚至 验证 〈 没 错 ， 就 是 验证 ! ) 过 程 都 比 以 往 简单 的 时 候 ， 简 直 把 我 给 乐 坏 了 。 我 高 兴 得 手 舞 
足 蹈 ， 相 信和 到 时 候 你 也 会 跟 我 一 样 。 下 一 章 我 们 就 来 学 习 HTML5 表 单 。 






























































表单 














在 HTMLS 到 来 之 前 ， 添 加 日 期 选择 回 、 占 位 符 文 本 和 范围 滑 块 等 到 表单 中 ， 总 是 需要 依靠 
JavaScripts VŽ, 我们 没有 简单 的 方式 来 告诉 用 户 我 们 期 望 的 输入 值 ， 如 电话 号 码 、 邮 件 地 址 或 
者 URL 等 。 好 消息 是 ，HTMLS 基 本 上 解决 了 这 些 问 题 。 

















本 章 有 两 个 主要 目标 。 第 一 ， 理 解 HTML5 中 的 表单 特性 ; 第 二 ， 学 会 如 何 使 用 最 新 的 CSS 
功能 在 多 个 设备 上 简单 布置 我 们 的 表单 。 


本 章 内 容 : 


口 在 表单 输入 框 中 轻松 插入 占 位 符 文 本 

口 在 必要 时 禁用 表单 域 中 的 自动 补 全 功能 

口 设置 必 填 项 

口 指定 不 同 的 输入 类 型 ， 如 电子 邮件 、 电 话 号 码 或 URL 
口 制作 数字 输入 滑动 条 以 便于 选择 数值 

a 使 用 日 期 和 颜色 选择 器 

口 学 习 如 何 使 用 正则 表达 式 定 义 表 单 值 验证 规则 

口 使 用 Flexbox 定 义 表单 样式 














9.1 HTML5 表单 

















我 想 ， 了 解 HTML5 表 单 最 简单 的 方法 就 是 通过 例子 去 了 解 。 那 就 让 我 们 从 我 之 前 做 的 最 佳 
日 间 电 视 节 目的 例子 开始 吧 。 这 里 需要 简单 介绍 一 下 。 








首先 ， 我 很 喜欢 电影 。 其 次 ， 对 于 什么 是 好 电影 什么 是 烂 片 ， 我 固执 已 见 。 














每 年 ， 当 公布 奥斯卡 奖 提名 名 单 的 时 候 ， 我 都 不 禁 感 慨 又 有 烂 片 得 到 奥斯卡 的 垂青 。 因 此 ， 
我 们 建立 一 个 HTML5 表 单 来 让 影迷 发 港 对 奥斯卡 提名 的 不 满 。 





























这 个 表单 是 由 几 个 fieldset 元 素 组 成 的 。 在 其 中 我 们 可 以 插入 一 堆 HTML5 表 单 输入 类 型 和 

















许多 占 位 符 文本 。 


下 面 就 是 这 个 表单 在 Chrome 中 没有 设置 样式 时 的 效果 : 


如 果 我 们 “聚焦 ”到 第 




















Oscar Redemption 


Here's your chance to set the record straight: tell us what year the wrong fim 
got nominated, and which film should have received a nod... 


r— About the offending film (part 1 of 3) 
The film in question? 
Year Of Crime 1929 
Award Won 





Tell us why that's wrong? | 3 A 

How you rate it (1 is woeful, 10 is awesome-sauce) O 7 
r~ What should have won? (part 2 of 3) 
The film that should have won? 








Tell us why it should have won? | 4 
How you rate it (1 is woeful, 10 is awesomesauce) 5 





r— About you? (part 3 of 3) 
Your Name 

Your favorite color MEN 

Date/Time aà/zn/yyyy 

Telephone (so we can berate you if you're wrong) 
Your Email address 

Your Web address 














Submit Redemption 





























交 表 单 ( 没有 输入 内 容 )， 就 会 看 到 下 面 的 结果 : 


好 消息 








m About the offending film (part 1 of 3) 


The film in question? | 
Year Of Crime 1929 
Award Won Please fill in this field. 


si asleep within 20 | 














是 使 用 原生 的 HTML5 完 成 的 ， 不 需要 再 依赖 JavaScript。 现 在 表单 验证 并 不 被 所 有 浏 


容 ,但 是 兼容 指日可待 。 首 先 ， 








我 们 再 学 习 相 关 样 式 的 使 用 。 


9.2 理解 HTML5 表单 中 的 元 素 


我 们 的 HTML5 表 单 中 含有 很 多 元 素 ， 所 以 我 们 拆 开 来 讲 。 表 单 中 的 三 


TA 








6 一 个 输入 框 并 且 开 始 输入 文本 ， 占 位 符 文本 就 会 被 移 除 。 如 果 失 焦 ， 
并 且 没 有 输入 内 容 ( 点 击 一 下 输入 框 以 外 的 的 区 域 即 可 )， 占 位 符 文本 会 再 次 显示 。 如 果 我 们 提 
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市 性 。 除 了 标准 的 表单 输入 框 和 文本 输入 域 之 外 ,表单 中 还 有 一 个 数字 控制 器 、 一 个 范围 滑 块 和 


,是 这 些 用 户 界 面 元 素 ,包括 前 面 提 到 的 滑 块 、 占 位 符 文 本 、 控 制 顺 、 输 入 校 验 等 ， 都 














p 


SR) jak 
让 我 们 尝试 一 下 上 面 这 些 HTML5 新 技能 。 在 掌握 了 这 些 方法 后 ， 








块 子 区 域 都 是 用 带 有 
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legendq 标 签 的 fielaqset 标 签 包 庄 的 ; 


«fieldset-» 
«legend»About the offending film (part 1 of 3)«/legend» 
«div» 
«label for-"film"»The film in question?«c/label» 
«input id-"film" name-"film" type-"text" placeholder-"e.g. King 
Kong" required» 
</div> 


从 上 面 的 代码 片段 中 可 以 看 到 ， 每 一 个 输入 元 素 都 有 一 个 对 应 的 label 元 素 , 然后 一 并 被 包 
庄 在 aiv 元 素 中 (我们 也 可 以 把 用 1abel 把 input 包 庄 起 来 )。 到 目前 为 止 ， 一 切 正常 。 不 过 , 在 
第 一 个 输入 框 中 , 我 们 就 遇 到 了 第 一 个 HTML5 表 单 特性 。 在 ia、name 和 type 这 些 普通 的 属性 后 
面 ， 我 们 看 到 了 placeholger 属 性 。 


















































9.2.1 placeholder 
placeholder 属 性 看 起 来 是 这 样 的 : 


placeholder="e.g. King Kong" 

因为 在 表单 域 中 对 占 位 符 文本 的 需求 实在 太 普遍 了 ， 所 以 HTML5 的 设计 者 决定 让 其 成 为 
HTML 的 一 个 标准 特性 。 只 需 在 input 元 素 上 加 入 placeholder 属 性 , 其 属性 值 就 会 默认 显示 为 
占 位 符 文本 , 输入 框 获取 焦点 时 该 文本 会 自动 消失 。 当 其 失 焦 日 没有 文本 被 输入 时 ， 占 位 符 文本 
会 重新 出 现 。 

为 占 位 符 文本 添加 样式 


你 可 以 使 用 :placeholder-shown 伪 类 选择 器 来 为 placenolder 属 性 添加 样式 。 要 知道 这 
个 选择 器 经 过 多 次 迭代 ， 所 以 你 要 确保 你 拥有 前 级 添加 工具 来 兼容 各 种 版 本 。 









































input :placeholder-shown { 
color: #333; 
} 


接 下 来 是 男 一 个 HTML5 表 单 特性 required 属 性 。 





9.2.2 required 
required 属 性 看 起 来 是 这 样 的 : 











required 


在 支持 HTML5 的 浏览 器 中 ， 在 input 元 素 中 添加 布尔 类 型 ( 意味 着 你 可 以 添加 该 属性 ， 也 
可 以 不 添加 ) 属性 required， 可 表明 该 项 为 必 填 项 。 如 果 表 单 提交 的 时 候 ， 该 必 填 项 没有 任何 
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信息 ,浏览 器 会 给 出 警示 信息 。 和 警告 信息 的 显示 方式 (包括 内 容 和 样式 ) 取决 于 浏览 器 和 输入 框 
类 型 。 








xk 














我 们 之 前 已 经 看 过 Chrome 中 的 必 填 项 警告 信息 。 下 面 的 截图 则 展示 了 Firefox 中 的 效果 ; 











Oscar Redemption 


Here's your chance to set the record straight: tell us what year the 
wrong film got nominated, and which film should have received a nod... 


About the offending film (part 1 of 3) 
The film in question? p.o. King Kong 
Year Of Crime : 
Award Won Please fill out this field. 


| p within 
minutes... 
Tell us why that's wrong? | 


How you rate it (1 is woeful, 10 is awesomesauce) 5 


What should have won? (part 2 of 3) 


The film that should have won? 
Hello? CAABBLLLLE 









Tell us why it should have won? 
How you rate it (1 is woeful, 10 is awesomesauce) 5 


About you? (part 3 of 3) 





Your Name | Dwight Schultz 


Your favorite color ME 
Date/Time 


Telephone (so we can berate you if you're wrong) | 1-234-546758 
Your Email address | dwight.schultz@gmail.cc 


Your Web address www.mysite.com 

















Submit Redemption 








required 属 性 可 用 于 多 种 类 型 的 输入 元 素来 确保 表单 域 中 必须 输入 值 。 要 注意 的 是 ， 
range, color, button4lhidden2$7 型 的 输入 元 素 不 能 tHjrequired, 因为 这 文 几 种 输入 类 型 几 
乎 都 有 默认 值 。 











9.2.3 autofocus 


HTMLS 的 autofocus 属 性 可 以 让 表单 在 加 载 完成 时 即 有 一 个 表单 域 被 默认 选中 ， 以 方便 用 
户 输入 。 下 面 代码 中 被 aiv 包 于 的 input 标 签 就 拥有 一 个 autofocus 属 性 : 





<div> 
<label for="search">Search the site...</label> 





«input id-"search" name-"search" type-"search" placeholder-"Wyatt 
Earp" autofocus»- 
«/div» 


使 用 该 属性 时 要 小 心 。 如 果 多 个 表单 域 都 添加 了 autofocus 属 性 , 在 不 同 的 浏览 器 上 表现 是 
不 一 致 的 。 例如, 在 Safari 上 , 最 后 一 个 添加 autofocus 的 表单 域 会 被 选中 , 而 在 Firefox 和 Chrome 
上 的 表现 则 恰恰 相反 ， 它 们 会 选中 第 一 个 添加 autofocus 属 性 的 元 素 。 

还 有 一 点 需要 注意 的 是 ,有 的 用 户 习 惯 使 用 空格 键 来 让 网 页 进行 下 滚 。 如 果 网 页 中 的 表单 中 
含有 带 有 autofocus 的 表单 域 , 则 会 阻止 空格 键 的 默认 行为 。 此 时 , 敲 击 空格 键 会 在 已 聚焦 的 输 
入 框 中 输入 空格 。 显 然 ， 这 样 会 让 用 户 很 愧 恼 。 

使 用 autofocus 属 性 的 时 候 , 要 确保 只 在 表单 中 使 用 一 次 , 并 且 了 解 对 那些 使 用 空格 滚动 的 
用 户 的 影响 。 


















































9.2.4 autocomplete 

很 多 浏览 器 默认 提供 自动 补 全 功能 来 辅助 用 户 输入 。 以 往 用 户 可 以 在 浏览 器 设置 中 打开 或 关 
闭 这 项 功能 , 现在 我 们 还 能 告知 浏览 器 我 们 不 想 在 某 个 表单 或 者 表单 域 上 使 用 自动 补 全 功能 。 这 
不 仅 能 保护 敏感 数据 ( 如 银行 账户 )， 还 可 以 让 你 确保 用 户 用 心 填写 表单 ， 手 动 输入 一 些 值 。 例 
如 ,在 需要 填写 电话 号 码 的 时 候 , 我 会 输入 一 个 假 号 码 。 我 知道 不 止 我 一 个 人 会 这 么 做 (大 家 不 
都 是 填 假 号 码 的 嘛 ? )， 但 我 敢 保证 ， 如 果 在 相关 的 输入 项 上 禁用 自动 补 全 功能 ， 用 户 肯 定 不 会 
输入 假 号 码 。 下 面 的 代码 演示 了 一 个 禁用 自动 补 全 功能 的 表单 项 : 






































«div» 

«label for-"tel"»Telephone (so we can berate you if you're wrong)</ 
label» 

«input id-"tel" name-"tel" type-"tel" placeholder-"1-234-546758" 
autocomplete-"off" required» 
«/div» 


我 们 也 可 以 给 整个 表单 (不 是 fielgset ) 设置 属性 来 禁用 自动 补 全 功能 。 示 例 代码 如 下 : 





























«form id-"redemption" method="post" autocomplete-"off"'» 


9.25 list 及 对 应 的 datalist 元 素 


利用 1ist 属 性 以 及 对 应 的 datalist 元 素 , 可 以 在 用 户 开始 在 输入 框 中 输入 值 的 时 候 ， 显示 
一 组 备 选 值 。 下 面 是 一 个 包含 在 aiv 中 的 使 用 1ist 属 性 及 对 应 aatalist 元 素 的 代码 示例 : 








«div» 
«label for-z"awardWon"»Award Won</label> 
«input id-"awardWon" name-"awardWon" type="text" list-"awards"-» 
«datalist id-"awards"-» 
«select» 
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«option value-"Best Picture"></option> 
«option value-"Best Director"»«/option» 
«option value-"Best Adapted Screenplay"»«/option» 
«option value-"Best Original Screenplay"»«/option» 
</select> 
</datalist> 
</div> 


list 属 性 中 的 值 (awards ) 同时 也 是 aatalist 元 素 的 ia。 这 样 就 可 以 让 aatalist 与 输入 
框 关联 起 来 。 虽 然 并 不 一 定 需要 将 option 包 库 在 select 中 , 但 是 这 样 做 有 助 于 为 老式 浏览 器 提 
供 降级 处 理 。 




















令 人 惊奇 的 是 ,直到 2105 年 中 期 ,gatalist 元 素 仍 未 被 iDOS 、 Safari 和 Android 
ŞS 4.4 及 以 下 版 本 的 系统 所 原生 支持 ( http://caniuse.com/ )。 
你 可 以 在 https://www.w3.org/TR/html5/forms.html 上 了 解 关于 datalist 的 规范 。 














使 用 了 1ist 属 性 的 输入 框 和 普通 输入 框 无 异 ， 当 开始 输入 时 ,在 支持 的 浏览 融 中 ) 输入 框 
下 面 会 显示 一 个 数据 选择 框 ， 其 中 包括 从 aatalist 中 检测 到 的 匹配 的 数据 。 在 下 面 的 截图 中 ， 
我 们 可 以 看 到 相应 的 效果 (SE T Firefox )。 在 本 例 中 ,因为 aatalist 中 的 所 有 option 都 包含 B， 
所 以 所 有 数据 都 显示 出 来 了 。 











一 About the offending film (part 1 of 3) 


The film in question? e.g. King Kong 
Year Of Crime 1934 : 
Award Won Bl 


Best Picture 1 asleep within 
Best Director nutes... 
Tel us why | Best Adapted Scree... 


How you rat Best Original Scree... is awesomesauce) 
Í 























但 是 当 输 入 D 时 ， 就 只 有 匹配 的 数据 才 被 显示 出 来 ， 效 果 如 下 图 所 示 : 








m About the offending film (part 1 of 3) — 


The film in question? e.g. King Kong 
Year Of Crime 1934 3 
Award Won D] 


Best Director l asleep 
Best Adapted Scree... PUTES - - 





Tell us why 











How you rate it (1 is woeful, 10 is awesom 
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list 和 aatalist 属 性 并 不 会 阻止 用 户 输入 自己 想 输 入 的 内 容 , 不 过 它们 确实 提供 了 一 种 便 
利 的 方式 来 仅 利 用 HTML5S 标 记 添 加 输入 提示 功能 ， 增 强 用 户 体 验 。 





9.3 HTML5 的 新 输入 类 型 


HIML5 新 增 了 很 多 输入 类 型 ， 其 中 一 个 作用 就 是 可 以 在 不 引入 JavaScript 代 码 的 情况 下 限制 
用 户 输入 的 数据 。 而 最 棒 的 是 ,在 那些 不 支持 新 特性 的 浏览 器 中 , 它们 会 默认 降级 显示 为 一 个 标 
准 的 文本 输入 框 。 此 外 , 还 有 很 多 有 用 的 腻子 脚本 可 以 让 老式 浏览 吉 跟 上 时 代 。 我 们 稍 后 会 提 到 
这 些 内 容 ， 现 在 先 来 看 看 这 些 新 的 HTML5 输 入 类 型 以 及 它们 所 带 来 的 便利 。 


























9.3.1 email 
你 可 以 将 输入 设置 为 emai1 类 型 ， 像 下 面 这 样 : 
type-"email" 


支持 email 的 浏览 需 会 期 望 用 户 的 输入 符合 电子 邮箱 地 址 的 语法 。 在 下 面 的 示例 代码 中 , 我 
们 将 type="email" 与 required 和 placeholder 组 合 起 来 使 用 : 























<div> 

«label for="email">Your Email address</label> 

«input id="email" name-"email" type-"email" placeholder-"dwight. 
Schultz8gmail.com" required» 
</div> 


当 与 equired 组 合 使 用 时 ， 如 果 提 交 一 个 不 符合 格式 的 地 址 ， 浏 览 器 会 生成 警告 信息 。 








广 About you? (part 3 of 3)- 
Your Name Ben Frain 
Your favorite color MEN 
Date/Time 8/4/2014 
Telephone (so we can berate you if you're wrong) 
Your Email address. sausages| 
Your Web addrer- 


| J Please enter an email address. — 
Submit Redemption | 

















此 外 ,许多 触摸 屏 设备 ( 如 安 卓 、iPhone 等 ) 会 根据 输入 类 型 改变 键盘 模式 。 下 图 显示 了 
type="email" 的 输入 框 在 iPad 上 的 使 用 效果 。 注 意 键盘 上 方便 输入 邮件 地 址 的 @ 符 号 。 
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9.3.2 number 
你 可 以 将 输入 设置 为 number 类 型 ， 像 下 面 这 样 : 


type-"number" 
支持 该 特性 的 浏览 器 期 望 输入 一 个 数字 。 这 些 浏览 器 还 提供 了 控制 按钮 ( spinner controls ), 
允许 用 户 简单 地 点 击 向 上 和 向 下 来 改变 数值 ， 代 码 示例 如 下 : 





«div» 
«label for-"yearOfCrime"»Year Of Crime«/label- 


«input id-"yearOfCrime" name-"yearOfCrime" type-"number" 
min-"1929" max-"2015" required» 
«/div» 


下 图 展示 了 该 输入 框 在 支持 该 特性 的 浏览 器 〈 Chrome ) 中 的 效果 : 





About the offending film (part 1 of 3) 


The film in question? e.g. King Kong 
Year Of Crime 
Award Won 


| fell asleep within 20 
Tell us why that's wrong? minutes... Z 


How you rate it (1 is woeful, 10 is awesomesauce) 




















如 果 你 输入 的 不 是 数字 , 浏览 器 会 怎么 做 呢 ? 例如 , Chrome 和 Firefox 会 在 表单 提交 的 时 候 在 
表单 域 上 弹出 一 个 警告 框 。 而 Safari 则 相反 ， 它 什么 都 不 会 做 ， 并 且 让 其 顺利 提交 。IE11 则 会 在 
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输入 框 失 焦 的 时 候 快 速 清除 其 中 的 内 容 。 





1. 最 大 和 最 小 范围 


你 会 注意 到 ， 在 之 前 的 代码 示例 中 ,我们 设置 了 最 大 和 最 小 范围 ， 类 似 如 下 : 











type="number" min="1929" max="2015" 
范围 之 外 的 数值 会 得 到 特别 处 理 。 


对 于 浏览 器 间 的 不 同 处 理 方式 ,你 应 该 不 会 感到 诈 异 了 。 例 如 ,IEI1 、Chrome 和 Firefox 都 会 
弹出 一 个 警告 框 ， 而 Safari 则 什么 都 不 会 做 。 








2. 改变 步 长 
你 可 以 使 用 step 属 性 来 改变 输入 框 的 控制 按钮 的 改变 步 长 。 例 如 ， 如 果 你 想 每 次 点 击 改变 
10， 可 以 这 么 写 : 








<input type="number" step="10"> 


9.3.3 url 
你 可 以 将 输入 设置 为 ur1 类 型 ， 像 下 面 这 样 : 
type-"url" 


如 你 所 料 ，ur1 输 入 类 型 是 用 于 输入 URL 地 址 的 。 与 te1 和 email 输 入 类 型 相似 ， 它 看 起 来 
和 标准 的 文本 输入 框 几 乎 一 样 。. 不 过 ,有些 浏 览 需 会 在 提交 不 合法 的 URL 时 显示 特定 的 警告 信息 。 
对 应 的 代码 示例 如 下 ， 其 中 包含 了 placeholder 属 性 。 














<div> 
«label for="web">Your Web address</label> 
<input id="web" name="web" type="url" placeholder="www.mysite.com"> 


</div> 


下 面 的 截图 显示 了 在 Chrome 中 提交 一 个 不 合法 URL 地 址 时 的 效果 : 














About you? (part 3 of 3) 
Your Name Dwight Shultz 
Your favorite color MEM 

Date/Time 09/04/2015 

Telephone (so we can berate you if you're wrong) 123 


Your Email address dwight.schultzegmail.c: 
Your Web address scones 





Submit Redemption 
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和 type="email" 类 型 一 样 ， 触 摸 屏 设 备 也 会 为 URL 输 入 框 修改 键盘 模式 。 下 图 显示 了 iPad 
上 type="url1" 的 使 用 效果 : 





Your Web address [Jww mysite com 


Submit Redemption 





























注意 到 键盘 上 的 .com 按 键 了 吗 ? 因为 我 们 使 用 了 URL 输 入 类 型 ， 所 以 设备 为 我 们 优化 了 键 
盘 ， 以 便于 输入 URL ( 在 iOS 上 ， 如 果 你 不 准备 前 往 .com 网 站 ， 可 以 长 按 来 获取 其 他 顶级 域名 )。 





9.3.4 tel 
设置 一 个 输入 框 期 望 用 户 输入 一 个 电话 号 码 ， 像 下 面 这 样 : 
type-"tel" 
下 面 是 一 个 更 完整 的 例子 : 


«div» 
«label for-"tel"»Telephone (so we can berate you if you're wrong)</ 
label» 
«input id-"tel" name-"tel" type-"tel" placeholder-"1-234-546758" 
autocomplete-"off" required» 
</div> 
尽管 在 许多 浏览 器 上 ， 其 至 是 IE11、Chrome 和 Firefox 等 现代 浏览 器 上 ，tel 类 型 都 设计 为 数 
字 类 型 格式 , 但 它 的 表现 和 普通 文本 输入 框 一 样 。 当 输入 无 效 值 ,它们 都 没有 在 输入 框 失 焦 或 表 
单 提 交 时 提供 任何 合理 的 警告 信息 。 


不 过 比较 好 的 一 点 是 ， 跟 对 待 smail 和 ur1 类 型 一 样 ， 触 摸 屏 设 备 为 这 种 类 型 贴心 地 提供 了 
数字 键盘 以 便 完成 输入 。 下 图 是 tel 输 入 类 型 在 iPad (3517108 8.2 ) 上 的 效果 : 
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注意 看 键盘 上 是 不 是 少 了 字母 按键 , 而 优先 显示 了 数字 按键 ? 这 样 就 可 以 让 用 户 更 快 地 输入 
正确 的 数值 。 


小 提示 
4l 


Q 如 果 你 不 想 采 用 Safari 中 的 tel 输 入 框 的 默认 蓝 色 边框 ， 可 以 通过 以 下 选择 器 
修改 : 


a[href^-tel] ( color: inherit; j 


9.3.5 search 
你 可 以 将 输入 设置 为 search 类 型 ， 像 下 面 这 样 : 
type-"search" 
search 输 入 类 型 和 普通 文本 输入 的 表现 基本 一 样 。 以 下 是 示例 代码 : 


<div> 

«label for="search">Search the site...</label> 

<input id="search" name="search" type="search" placeholder= "Wyatt 
Earp"'» 
</div> 


然而 , 软件 键盘 ( 例如 移动 设备 上 的 ) 经 常会 提供 一 个 更 富有 针对 性 的 键盘 。 以 下 是 iOS 8.2 
键盘 在 遇 到 search 类 型 输入 框 时 的 显示 效果 : 
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olvii li iL e l ER 
also r elnio ik]: EB 


























9.3.6 pattern 


你 可 以 让 输入 域 只 接受 某 种 特定 格式 的 输入 : 
patter="" 


你 可 以 通过 pattern 属 性 来 使 用 正则 表达 性 定义 用 户 输入 的 数据 格式 。 

















学 习 正则 表达 式 


如 果 你 从 未 接触 过 正则 表达 式 ， 我 推荐 你 访问 https://en.wikipedia.org/wiki/ 
. Regular expression, 
正则 表达 式 在 许多 编程 语言 中 都 被 用 作 识别 字符 串 的 一 种 方法 。 虽 然 刚 开 
TUO 始 学 习 的 时 候 会 觉得 吓人 ， 但 是 一 旦 掌握 ， 你 就 会 觉得 它们 十 分 强大 和 灵活 。 
例如 ， 你 可 以 构建 正则 表达 式 来 匹配 密码 格式 ， 或 者 选择 特定 格式 的 CSS 类 名 。 
为 了 帮助 你 书写 自己 的 正则 表达 式 并 理解 它们 的 工作 方式 ， 我 推荐 你 从 
http://www.regexr.com/ 这 种 基于 浏览 器 的 工具 开始 尝试 。 


示例 代码 如 下 : 
<div> 
«label for="name">Your Name (first and last)</label> 
«input id-"name" name="name" pattern-"([a-zA-Z](3,30)Ns*)-«[a-zA- Z] 
(3,30)" placeholder-"Dwight Schultz" required» 
«/div» 


我 花费 了 大 约 458 秒 在 网 上 找到 了 一 个 正则 表达 式 来 验证 姓名 。 在 pattern 属 性 上 输入 这 个 
正则 表达 式 , 支持 该 特性 的 浏览 絮 会 按照 指定 格式 验证 输入 值 。 当 和 required 属 性 配合 使 用 时 ， 
一 且 输 入 不 符合 格式 的 值 ， 浏 览 需 会 如 下 图 一 般 给 出 相应 的 提示 。 在 本 例 中 我 的 输入 缺少 姓氏 : 




















Ben| 


E Please match the format requested. 
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这 时 候 又 出 现 浏览 器 差异 性 问题 了 。 了 下 11 会 要 求 字 段 必 须 正 确 输入 ， 而 Safari Firefox fl 
Chrome 浏 览 器 则 什么 都 不 做 〈 就 和 标准 的 文字 输入 框 一 样 )。 





9.3.7 color 


想 让 输入 域 接受 颜色 输入 吗 ? 你 可 以 这 么 做 : 
type-"color" 


colori AJSJJ ES N Ey Gres ( 暂时 只 是 Chrome 和 Firefox ) 来 让 用 户 
选择 颜色 值 (十 六 进 制 值 )。 示 例 代 码 如 下 : 


«div» 
«label for-"color"»Your favorite color«/label-» 
«input id-"color" name-"color" type-"color"» 
</div> 




















9.3.8 “日 期 和 时 间 输 入 类 型 


新 的 aate 和 time 输 入 类 型 背后 的 设计 思想 ， 是 想 为 选择 日 期 和 时 间 提 供 一 致 的 用 户 体验 。 
如 采 你 曾 在 网 上 闫 过 演出 门票 ， 那 你 就 可 能 用 过 菏 种 日 期 选择 右 。 这 种 功能 一 般 是 由 JavaScript 


ae 


(通常 是 jQuery UI 库 ) 提供 的 ， 但 我 们 希望 仅仅 通过 HTML5 就 实现 这 种 常用 功能 。 






























































1.date 
示例 代码 如 下 : 
«input id="date" type-"date" name="date"> 


和 color 类 型 一 样 , 目前 对 Gate 提 供 原 生 支 持 的 浏览 带 寥 寥 无 几 , 大 多 数 浏览 器 默认 将 其 泻 
染 为 标准 的 文本 输入 框 。 Chrome 和 Opera 是 唯 二 实现 了 这 种 功能 的 现代 浏览 器 。 这 其 实 也 不 奇怪 ， 
因为 它们 两 个 都 使 用 了 相同 的 引擎 内 核 ( 被 称 作 Blink， 如 果 你 有 兴趣 可 以 了 解 )。 

















April 2015 v 4 e » 





2015 
Jan Feb Mar Apr 


May Jun Jul Aug 








Sep Oct Nov Dec 
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date 和 time 输 入 类 型 有 很 多 不 同 的 变种 。 下 面 是 对 其 他 变种 类 型 的 简要 介绍 。 
2. month 
示例 代码 如 下 : 


<input id="month" type="month" name="month"> 


选择 器 界面 允许 用 户 选择 某 个 月 ， 输 入 框 中 会 被 填充 为 年 和 月 组 成 的 值 ， 如 2012-06。 下 图 
展示 了 浏览 需 中 的 效果 : 
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2015 
Jan Feb Mar Apr 


May Jun Jul Aug 





Sep Oct Nov Dec 














3. week 
示例 代码 如 下 : 
<input id="week" type="week" name="week"> 


使 用 week 类 型 时 ,选择 器 允许 用 户 选 择 一 年 中 的 某 一 周 ,输入 框 中 会 被 填充 格式 如 2012-W47 
这 样 的 数据 。 


下 图 显示 了 浏览 右 中 的 效果 : 














April 2015 ~ E 


Week |Mon Tue Wed Thu Fri Sat Sun 
14 1 2 3 4 5 
15 6 y 8 So gu b 3E 
16 13 14 15 16 17 18 19 
17 20 21 22 23 24 25 26 
18 27 28 29 30 
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4. time 

示例 代码 如 下 : 

«input id="time" type="time" name="time"> 

time 输 入 类 型 允许 输入 一 个 24 小 时 制 的 时 间 值 ， 如 23:50。 

在 支持 该 特性 的 浏览 器 中 ， 会 显示 出 加 减 控制 按钮 ， 且 仅 允 许 输 入 时 间 值 。 





9.3.9 范围 值 
range 输 入 类 型 会 生成 一 个 滑动 条 。 示 例 代码 如 下 : 


<input type="range" min="1" max="10" value="5"> 


Firefox 中 的 效果 如 下 图 : 






































默认 的 输入 范围 是 0 到 100。 但 上 面 的 示例 通过 min 和 max 属 性 值 将 其 范围 限定 为 1 到 10。 
range 输 入 类 型 的 一 大 问题 是 它 从 来 不 给 用 户 显示 当前 的 输入 值 。 虽然 滑动 条 仪 被 设计 用 来 

选择 模糊 的 数值 ， 但 我 还 是 经 常 想 看 看 它 的 当前 值 。 使 用 HMTL5 目 前 无 法 解决 该 问题 ,但 是 如 

果 你 确实 需要 显示 滑动 条 的 当前 输入 值 ,可 以 通过 JavaScript 实 现 。 我 们 将 上 例 中 的 代码 稍 作 修改 : 







































































«input id-"howYouRateIt" name-"howYouRateIt" type-"range" min="1" 
max-"10" value-"5" onchange-"showValue(this.value)"»«span 
id-"range"»5«/sgpan» 


我 们 增加 了 两 个 东西 ， 一 个 是 onchange 属 性 ， 另 一 个 是 id 为 range 的 span 元 素 。 接 下 来 再 
将 下 面 这 段 JavaScript 代 码 加 入 页 面 : 


























«script» 
function showValue (newValue) 
{ 
document.getElementById("range").innerHTML-newValue; 
j 


</script> 


这 样 做 就 能 获取 滑动 条 当前 的 输入 值 ， 将 其 显示 在 id 为 range 的 元 素 ( span 标 签 ) 中 。 你 
可 以 使 用 CSS 来 改变 显示 效果 。 


除 此 之 外 , 还 有 一 些 和 表单 有 关 的 HTML5 属 性 ,你 可 以 在 https://www.w3.org/TR/html5/forms. 
html 上 阅读 完整 的 规范 。 
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9.4 ”如何 给 不 支持 新 特性 的 浏览 器 打 补 丁 
前 面 把 HTML5 表 单 的 功能 吹 上 了 天 ， 但 要 想 实际 使 用 还 有 两 个 非常 麻烦 的 问题 : 一 是 支持 
表单 新 特性 的 浏览 器 在 具体 实现 上 有 所 不 同 ， 二 是 对 完全 不 支持 新 特性 的 浏览 器 如 何 处 理 。 


如 何 你 需要 在 一 些 老式 浏览 器 或 不 支持 的 浏览 器 上 使 用 这 些 新 特性 ,可 以 考虑 使 用 Webshims 
Lib。 你 可 以 在 http://afarkas.github.io/webshim/demos/ 上 下 载 。 它 是 由 Alexander Farks 编 写 的 补丁 
库 ， 可 以 让 老式 浏览 带 支 持 新 的 HTML5 特 性 。 


















































在 打 补 丁 的 时 候 务 必要 小 心 


M 当 你 需要 使 用 腻子 脚本 的 时 候 ， 一 定 要 考虑 充分 。 尽 管 它们 十 分 方便 ， 但 
是 也 增加 了 项 目的 重量 。 例 如 ，Webshims 依 赖 于 jQuery， 所 以 如 果 你 之 前 并 没 
有 使 用 jQuery, 则 相当 于 添加 了 新 的 依赖 。 除非 对 老式 浏览 器 打 补 丁 是 必 不 可 少 

的 ， 否 则 我 都 会 放弃 。 























Webshims 最 便捷 的 地 方 就 是 按 需 打 补丁 。 如 果 在 原生 支持 HTML5 新 特性 的 浏览 器 上 查看 网 
页 ， 则 仅 会 给 网 页 加 入 一 丁点 儿 的 宛 余 代码 。 而 对 于 老 版 本 浏览 器 ， 虽 然 它 们 需要 加 载 更 多 的 
代码 (因为 它们 本 身 能 力 不 足 ), 但 通过 相关 JavaScript 方 法 的 辅助 , 它们 能 提供 基本 一 致 的 用 户 
体验 。 


通过 打 补 丁 收益 的 不 仅仅 只 是 老 版 本 浏览 器 。 我 们 知道 ， 现 在 很 多 浏览 器 都 没有 完全 实现 
HTML5 的 表单 特性 。 在 网 页 中 移 和 人 Webshims Lib 可 以 弥补 这 些 浏览 器 的 缺陷 。 例 如 ， 在 Safari 
中 , 提交 一 个 必 填 项 为 空 的 HTML5 表 单 时 , 不 会 有 任何 警告 信息 。 其 实 这 个 表单 根本 不 会 提交 ， 
但 它 也 没 给 用 户 任何 反馈 ,这 一 点 都 不 人 性 化 。 在 页 面 中 引入 Webshims Lib 后 ， 上 述 问题 会 得 
到 修补 。 


当 Firefox 无 法 给 type="number" 属 性 提供 控制 按钮 的 时 候 , Webshims Lib 也 可 以 提供 一 个 合 
适 的 jQuery 解决 方案 。 总 之 ， 它 是 一 个 很 好 用 的 工具 ， 建 议 你 立即 下 载 这 个 小 巧 的 工具 包 ， 然 后 
在 页 面 中 使 用 ， 这 样 我 们 就 可 以 继续 编写 HTML5 表 单 ， 而 所 有 用 户 都 可 以 放心 地 看 到 他 们 需要 
的 表单 了 ( 不 包括 使 用 IE6 而 且 禁 用 JavaScript 功 能 的 那 两 个 人 一 一 你 知道 我 在 说 谁 一 一 快 别 这 么 
SE 5s 


首先 下 载 Webshims Lib ( http://afarkas.github.io/webshim/demos/ ) 并 解压 ， 然 后 将 其 中 的 
js-webshim 文 件 夹 复制 到 相应 位 置 。 为 简便 起 见 ， 本 例 中 我 将 其 复制 到 网 站 的 根 目 录 。 


现在 在 页 面 中 移入 脚本 : 






















































































<script src="js/jquery-2.1.3.min.js"></script> 
<script src="js-webshim/minified/polyfiller.js"></script> 
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«script» 
// 引入 你 需要 的 功能 
webshim.polyfill('forms'); 
</script> 


分 析 一 下 这 上段 代码 ,首先 引入 了 一 个 本 地 的 jQuery 库 文 件 C 可 以 在 http:/jquery.com/ 上 下 载 最 
新 版 本 ) 和 Webshim 脚 本 : 





«script src-"js/jquery-2.1.3.min.js"»«/script» 
«script src-"js-webshim/minified/polyfiller.js"»«/script» 


最 后 ， 使 用 初始 化 脚本 加 载 补丁 : 








«script» 
// 引入 你 需要 的 功能 
webshim.polyfill('forms'); 
</script> 


现在 ， 浏 览 器 缺失 的 新 功能 都 会 通过 相关 的 腻子 脚本 被 自动 追加 进来 。 真 是 太 棒 了 ! 








9.5 使 用 CSS 美化 HTML5 表单 


现在 我 们 的 表单 已 经 能 在 各 种 浏览 需 中 正常 地 和 运行， 下面 我 们 将 让 它 响应 不 同 的 视 口 大 小 。 
尽管 我 不 认为 自己 是 一 个 设计 师 , 但 是 通过 使 用 在 前 几 章 中 学 到 的 一 些 技巧 , 我 认为 我 们 可 以 让 
自己 的 表单 富有 美感 











你 可 以 在 example 09-02 上 观看 经 过 美化 的 表单 。 记 住 ， 如 果 你 没有 任何 示 
— 例 代 码 ， 可 以 到 http://rwd.education/ 下 载 。 


在 本 例 中 ,我 同样 引入 了 两 版 的 样式 表 :style .css 是 已 经 添加 了 浏览 器 厂商 前 级 的 版 本 ( 通 
过 Autoprefixer 生 成 )， 而 styles-unprefixed.css 则 是 我 写 的 CSS 文 件 。 后 者 会 更 容易 理解 。 


下 图 是 表单 在 小 屏 模 式 下 的 显示 效果 : 
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| & © iOS Simulator - iPhone 5s - iPhone 5... 





Carrier 仿 10:33 PM -— 
file;///Users/benfrain/Documents/Storage/articles/rwd/co. 
visis. U UIT 


The film in question? 


e.g. King Kong 





Year Of Crime 





Award Won 


e.g. Best Picture 





Tell us why that's wrong? 


| fell asleep within 20 minutes... 


How you rate it (1 is woeful, 10 is great) 


— SÁ— O 





What should have won? 


(part 2 of 3) 




















下 图 则 是 大 屏 下 的 显示 效果 : 





Oscar Redemption 
Here's your chance to set the record straight: tell us what year the 
wrong film got nominated, and which film should have received a 


nod... 
The film in question? e.g. King Kong 
Year Of Crime 1954 
Award Won jdhbdfhb. 


I fell asleep within 20 minutes... 
Tell us why that's wrong? 


How you rate it (1 is woeful, 10 is great) o 


What should have won? (part 2 of 3) 


The film that should have won? Cable Guy 


Hello? CAABBLLLLE GUUUY!!!!! 
Tell us why it should have won? 


About you? (part 3 of 3) 


Your Name Dwight Schultz 
Your favorite color mm 
Date/Time 





Telephone (so we can berate you if you're wrong) — 1-234-546758 


Your Email address dwight.schultzG;gmail.com 





Your Web address www.mysite.com 


Ready? 
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如 果 你 仔细 阅读 CSS 代 码 ， 会 发 现 我 使 用 了 前 儿童 提 到 的 很 多 技术 。 例 如 ,我 利用 Flexbox 
(第 3 章 ) 维持 元 素 间 的 均匀 间隔 和 其 灵活 性 ; 利用 变形 和 过 渡 (第 8 童 ) 让 被 聚焦 的 输入 域 放 大 ， 
证 被 聚焦 的 提交 按钮 垂直 翻转 ; 利用 盒 阴 影 和 渐变 (第 6 章 ) 凸显 表单 中 不 同 的 区 域 ， 利用 媒体 
查询 (第 2 章 ) 在 不 同 的 视 口 下 调整 Flexbox 的 方向 ;利用 CSS3 的 伪 类 选择 器 〈 第 5 章 ) 确保 选择 
的 正确 性 。 


我 不 会 再 次 详细 叙述 那些 技术 细节 ， 而 是 集中 在 两 个 特殊 的 地 方 。 首 先 ， 如 何在 视觉 上 显示 
必 填 项 ( 和 显示 该 项 已 填 ); 其 次 ， 如 何 告诉 用 户 该 输入 域 已 被 聚焦 。 
























































9.5.1 显示 必 填 项 





我 们 可 以 仅 通 过 CSS 就 告诉 用 户 此 输入 域 为 必 填 项 。 代 码 如 下 : 





T 








input:required { 
/* RA */ 
} 
在 该 选择 器 中 ， 我 们 可 以 设 定 输入 域 上 的 border 或 者 outline， 或 者 利用 background- 
image 添 加 背景 图 片 。 你 可 以 把 你 所 有 的 想法 都 绘制 其 上 。 我 们 也 可 以 使 用 另外 一 个 选择 器 来 标 
记 被 聚焦 的 必 填 项 。 示 例如 下 : 




















input:focus:required ( 
/* 样式 */ 

) 

然而 , 这 只 是 为 输入 框 本 身 添加 了 样式 。 如 果 我 们 想 为 相关 的 lapbel 元 素 添加 样式 呢 ? 我 决 
定 在 标签 旁 添加 一 个 小 星 号 来 表明 该 项 为 必 填 项 。 但 这 带 来 了 一 个 问题 。 一 般 来 说 ，CSS 只 让 我 
们 操作 以 下 几 种 情况 的 元 素 样式 : 作为 某 个 特定 元 素 的 子 元 素 、 元 素 本 身 、 某 种 特定 状态 下 的 元 
素 或 其 相 邻 元 素 (我 说 的 特定 状态 ， 指 的 是 nover、focus、active、checked 等 )。 在 下 例 代 
码 中 ， 我 使 用 :hover， 不 过 这 个 状态 在 触摸 设备 中 是 无 法 显示 的 。 


.item:hover .item-child () 


在 上 例 选 择 需 中 ，item-childa 会 在 元 素 被 悬 停 的 时 候 添 加 相应 的 样式 。 



































.item:hover ~ .item-general-sibling () 


应 用 上 例 的 选择 器 后 ， 当 鼠标 其 停 于 item 上 时 ， 如 果 item-general-sibling 是 与 其 拥有 
共同 父 元 素 并 且 位 于 它 后 方 的 兄弟 元 素 ， 那 么 样式 会 被 应 用 到 item-general-sibling 上 。 

















.item:hover + .item-adjacent-sibling () 


本 例 中 ， 当 鼠标 悬 停 在 元 素 上 时 ， 如 果 item-adqjacent-sibling 是 紧 跟 item 的 兄弟 元 素 ， 
那么 样式 会 被 应 用 到 item-adjacent-sibling 上 。 
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所 以 ， 回 到 我 们 的 问题 上 。 如 果 我 拥有 一 个 如 下 例 的 label 标 签 和 输入 域 , 并 且 标 签 位 于 输 
和 人 域 的 前 方 ( 因 布 局 所 需 )， 我 们 就 卡 克 了 。 
<div class="form-Input_Wrapper"> 
«label for-"film"»The film in question?</label> 
«input id-"film" name-"film" type-"text" placeholder-"e.g. King 


Kong" required/» 
«/div» 


这 种 情况 下 ， 仅 用 CSS 无 法 根据 输入 域 是 否 必需 来 改变 标签 的 样式 〈 因为 输入 域 位 于 标签 的 
后 方 )。 我 们 可 以 交换 两 个 元 素 的 位 置 ， 但 是 那样 标签 就 会 位 于 输入 域 的 后 方 。 这 并 不 是 我 们 期 
望 的 结果 。 


然而 Flexbox 让 我 们 可 以 轻易 倒序 放置 元 素 ( 如 果 你 还 不 清楚 的 话 ， 请 阅读 第 3 章 )。 于 是 我 
们 可 以 这 样 编写 代码 : 


«div class-"form-Input Wrapper"» 

«input id-"film" name-"film" type-"text" placeholder-"e.g. King 
Kong" required/» 

«label for-"film"»The film in question?«c/label» 
«/div» 

















然后 ， 我 们 对 父 元 素 使 用 flex-direction: row-reverse I # flex-direction: 
column-reverse。 这 两 个 声明 会 在 视觉 上 倒序 放置 它们 的 子 元 素 , 这 让 我 们 可 以 把 标签 放置 在 
输入 域 的 上 方 COEF ) REAN (KEF )。 接 下 来 ,我 们 就 可 以 真正 地 为 必 填 项 提供 提示 了 。 


多 亏 倒 序 放置 的 标签 ， 现 在 我 们 可 以 通过 相 邻 兄弟 选择 器 来 实现 需要 的 效果 了 。 
input:required + label:after { } 


这 段 代 码 是 说 , 对 于 紧 跟 在 必 填 输入 域 后 的 标签 , 应 用 大 括号 内 的 样式 。 下面 是 本 小 节 的 CSS 
代码 : 


input:required + label:after { 
content; "*"; 
font-size: 2.1em; 
position: relative; 
top: 6px; 
display: inline-flex; 
margin-left: .2ch; 
transition: color, 1s; 


} 















































input:required:invalid + label:after { 
color: red; 


} 


input:required:valid + label:after { 
Color: green; 


} 
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此 时 ， 当 你 聚焦 在 必 填 输入 域 上 并 且 输 入 相关 的 值 后 ,星星 会 变 为 绿色 。 这 是 一 个 微妙 又 有 
用 的 关联 。 





除了 我 们 之 前 提 到 过 的 , 其实 还 有 很 多 选择 器 ( 已 经 实现 了 和 正在 规划 的 )。 
要 想 了 解 最 新 的 选择 器 列表 , 可 以 Selectors Level 4 规范 的 最 新 草案 :https:/drafts. 


csswg.org/selectors-4/ 


9.5.2 ”创造 一 个 背景 填充 效果 


在 第 6 章 ， 我 们 学 会 了 如 何 生成 线性 和 径 向 渐变 背景 。 然 而 不 幸 的 是 我 们 不 能 在 两 个 背景 
图 片 间 添加 过 渡 效 果 (因为 浏览 器 要 将 声明 光栅 化 为 图 片 )。 然而， 我 们 可 以 在 相关 属性 的 值 中 
间 添 加 过 渡 效 果 ， 如 packground-position 和 background-size。 我 们 将 使 用 这 个 因素 来 创 
造 一 个 填充 效果 ， 告 知 用 户 input 或 者 Eextarea 被 聚焦 。 


下 例 是 加 到 input 上 的 属性 和 值 : 



































input:not([type-"range"]), 
textarea ( 
min-height: 30px; 
padding: 2px; 
font-size: 17px; 
border: 1px solid #ebebeb; 
outline: none; 
transition: transform .4s, box-shadow .4s, background-position .2s; 
background: radial-gradient(400px circle, #fff 99$, transparent 
99$), #f1f1f1; 
background-position: -400px 90px, 0 0; 
background-repeat: no-repeat, no-repeat; 
border-radius: 0; 
position: relative; 


} 





input:not([type-"range"]):focus, 
textarea:focus { 

background-position: 0 0, 0 0; 
} 


在 第 一 个 规则 里 , 我 们 生成 了 一 个 白色 径 向 渐变 , 但 是 它 被 放置 在 视线 外 。 定 义 在 其 后 侧 的 
背景 颜色 ( 紧 跟 在 radial-gradient 后 的 HEX 值 ) 并 没有 被 偏 黎 ， 所 以 它 能 提供 一 个 默认 的 颜 
色 。 当 输入 域 被 聚焦 时 ，radial-gradient 上 的 背景 位 置 会 设 定 为 默认 。 因 为 我 们 给 背景 图 片 
设置 了 过 渡 ,， 所 以 可 以 在 两 者 之 间 看 到 漂亮 的 过 渡 效 果 。 最 终 我 们 实现 了 在 用 户 输入 时 , 输入 域 
被 填充 为 不 同 的 颜色 。 
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i 对 于 原生 UI 的 样式 部 分 ， 不 同 的 浏览 器 都 有 专属 的 选择 器 。Aurelius 
Wendelken 为 此 维护 了 一 个 列表 。 我 复制 了 一 份 (或 者 按照 git 的 说 法 ，“fork” 了 
一 份 )， 你 可 以 访问 https://gist.github.com/benfrain/403d3d3a8e2b6198e395 查 看 。 


9.6 小 结 


在 本 章 中 ,我 们 掌握 了 许多 新 的 HTML5 表 单 特性 。 这 让 我 们 可 以 设计 更 好 用 的 表单 ， 获 取 
更 准确 的 数据 。 此 外 , 我 们 可 以 使 用 JavaScript 的 腻子 脚本 来 让 用 户 体验 这 些 可 能 未 被 浏览 咒 实 现 
的 技术 。 


我 们 的 响应 式 HTML5 和 CSS3 的 学 习 之 旅 快要 结束 了 。 尽 管 我 们 已 经 花费 了 很 多 时 间 学 习 ， 
但 我 知道 ,我 无 法 覆盖 你 会 遇 到 的 所 有 情况 。 因 此 , 在 最 后 一 章 我 将 从 更 高 的 角度 来 看 待 响应 式 
Web 设 计 ， 并 且 尝 试 提供 一 些 可 靠 的 、 优 秀 的 实现 方法 , 希望 这 能 有 助 于 你 更 好 地 开发 自己 的 响 
应 式 项 目 。 











实现 啊 应 式 Web 设 计 



































在 我 最 喜欢 的 故事 和 电影 里 , 通常 都 会 有 这 样 一 幕 :导师 给 英雄 一 个 建议 或 者 赠 予 魔法 物品 。 


你 知道 那些 东西 在 日 后 会 大 有 用 处 ， 只 是 你 不 知道 什么 时 候 以 什么 方式 发 挥 作 用 。 




















好 吧 , 我 想 在 这 最 后 一 革 中 扮演 一 下 导师 的 角色 ( 另外, 我 的 头发 越 来 越 少 了 ,我 看 起 来 也 





MRR) 我 希望 你 ， 我 的 好 徒弟 ， 在 你 开始 响应 式 设计 前 给 我 一 点 时 间 为 你 提 点 建议 。 























本 章 会 有 一 半 是 哲学 上 的 思考 与 指导 ,而 另 一 半 则 是 看 起 来 之 无 关联 的 提示 和 技巧 。 我 希望 





在 你 进行 响应 设计 开发 的 某 些 时 候 ， 这 些 提 示 会 给 你 带 来 帮助 。 


本 章 内 容 : 


口 尽快 让 设计 在 浏览 器 和 真实 设备 上 运行 起 来 
口 让 设计 决定 断 点 

口 拥抱 渐进 增强 

口 确定 需要 文 持 的 浏览 

口 使 用 渐进 增强 进行 开发 

O 将 CSS 的 断 点 和 JavaScript 关 联 起 来 

口 生产 中 避免 使 用 CSS 框 架 

口 开发 实用 的 解决 方案 

口 写 最 简单 的 可 行 代码 

Q 在 视 口中 隐藏 、 显 示 、 加 载 内 容 

口 将 可 视 化 的 工作 交 给 CSS 

口 使 用 验证 器 和 代码 检测 工具 

a 分 析 和 测试 网 页 性 能 ( webpagetest.org ) 
口 拥抱 更 快 、 更 有 效 的 技术 

口 紧 跟 技术 发 展 潮流 
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10.1 尽快 让 设计 在 浏览 器 和 真实 设备 上 运行 起 来 


响应 式 Web 设 计 做 得 越 多 ， 我 越 觉得 尽快 让 设计 在 浏览 器 环境 中 运行 起 来 很 重要 。 如 果 你 既 
是 设计 师 又 是 开发 者 ， 这 很 简单 。 只 要 你 有 足够 的 灵感 ， 就 可 以 迅速 地 在 浏览 器 上 开发 出 原型 ， 
然后 再 进行 完善 。 完 全 放弃 高 保 真 的 整 页 实物 模型 ， 可 以 让 我 们 更 好 地 接受 这 种 做 法 。 不 过 , 也 
可 以 考虑 一 下 Style Tiles 一 个 定位 在 情绪 版 (moodboard ) 和 完整 模型 之 间 的 产品 。Style Tiles 
的 介绍 (http://styletil.es/ ) 中 是 这 样 说 的 : 



































"Style Tiles 是 由 字体 、 颜 和 色 、 界 面 元 素 所 组 成 的 设计 产品 ， 用 于 展示 Web 页 面 中 的 
视觉 设计 效果 。” 
我 认为 这 能 在 相关 人 员 间 更 好 地 展示 和 传递 视觉 设计 的 宗旨 ， 而 且 再 也 不 需要 拼凑 各 种 情 
绪 版 。 




















让 设计 决定 断 点 

我 想 重 申 一 下 前 儿童 中 提 到 的 一 个 点 。 让 设计 决定 断 点 。 相 比 于 在 开发 过 程 中 决定 断 点 , 这 
更 为 容易 一 点 。 你 应 当 总 是 从 最 小 的 屏幕 尺寸 开始 设计 ,渐渐 地 使 视 口 尺 寸 增 大 ,这 样 你 就 能 知 
道 在 哪个 地 方 加 入 断 点 。 

你 还 会 发 现 ， 这 时 候 编码 比较 轻松 。 你 首先 为 最 小 的 视 口 编写 CSS， 然 后 在 媒体 查询 中 修改 
其 在 较 大 视 口 下 的 表现 。 例 如 : 


















































.rule { 
/* 小 型 视 口 样式 */ 
} 


@media (min-width: 40em) { 
.rule { 
/* 中 型 视 口 样式 */ 
} 
} 


@media (min-width: 70em) { 
.rule { 
/* 大 型 视 口 样式 */ 
} 
} 


10.2 ”在 真实 设备 上 观察 和 使 用 设计 
如 果 可 以 ， 那 就 通过 早期 的 设备 (电话 /平板 电脑 ) 来 打造 你 自己 的 “设备 实验 室 ” 吧 。 具 Cc 








有 多 个 不 同 设备 是 十 分 有 帮助 的 。 这 不 仅 能 让 你 感觉 到 设计 在 不 同 设备 上 的 表现 ,而 且 能 在 早期 
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就 暴露 出 一 些 布局 、 泻 染 问题 。 毕 竟 没 人 喜欢 在 已 经 完成 一 个 项 目 后 被 告知 在 某 些 环境 下 代码 无 
AEK THE. FIA, HMA! 这 并 不 需要 花费 太 多 。 举 个 例子 ,你 可 以 在 eBay 上 购买 二 手 的 电 
话 或 者 平板 设备 ,或 者 从 更 新 换代 了 设备 的 亲朋 威 友 手中 买 入 。 



































使 用 像 BrowserSync 这 样 的 工具 来 同步 你 的 工作 


. 我 近来 使 用 过 的 一 个 最 省 时 间 的 工具 是 BrowserSync。 配 置 完成 后 ， 当 你 保 
存 你 的 工作 时 ,诸如 CSS 等 的 变化 就 会 被 注入 到 浏览 器 上 ， 而 无 需 你 不 断 地 刷新 
屏幕 。 如 果 这 还 不 够 吸引 你 ， 它 还 能 通过 WIFI 将 在 不 同 设备 上 的 浏览 器 刷新 。 
这 节省 了 拿 起 每 个 测试 设备 点 击 刷 新 的 时 间 。 它 甚至 能 同步 滚动 和 点 击 。 强 烈 
推荐 https://browsersync.io/。 


10.3 ”拥抱 渐进 增强 


在 之 前 的 章节 中 , 我 们 简要 介绍 过 渐进 增强 的 概念 。 这 是 一 种 我 在 实践 中 发 现 十 分 有 用 而 且 
值得 大 力 推广 的 开发 方法 。 逐 步 增强 的 基本 想法 是 , 从 选择 文 持 的 浏览 器 中 选取 它们 共有 的 子 集 
方法 来 开始 编写 你 的 前 端 代码 (HTML, CSS, JavaScript )。 然 后 ， 逐 步 优 化 你 的 代码 以 适应 那 
些 比 较 强大 的 浏览 器 和 设备 。 这 种 方法 看 起 来 十 分 简单 ， 事实 上 也 确实 如 此 , 但 如 果 你 习惯 了 从 
最 佳 设备 上 开始 设计 , 然后 再 降级 你 的 代码 , 让 它们 能 够 在 低 版 本 的 浏览 器 或 者 旧式 设备 上 运行 ， 
你 会 发 现 渐 进 增强 更 为 方便 。 


想象 一 下 ， 你 眼前 是 一 个 糟 透 了 的 、 老 掉 牙 的 设备 ， 不 能 运行 JavaScript， 不 支持 Flexbox ， 
不 支持 CSS3/CSS4。 在 这 种 情况 下 ， 你 可 以 做 什么 来 提供 一 个 不 错 的 体验 呢 ? 


最 重要 的 是 ， 你 应 该 编写 能 够 精确 描述 你 的 内 容 的 HTML5 标 记 。 如 果 你 正在 构建 的 是 一 个 
基于 文本 和 内 容 的 网 站 ， 这 个 任务 并 不 困难 。 这 种 情况 下 ， 应 专注 于 正确 使 用 main、header、 
footer、article、section 和 asidqe 等 元 素 。 它 不 仅 能 让 你 的 代码 分 成 若干 有 效 的 部 分 ， 也 
能 为 你 的 用 户 提供 更 大 的 方便 。 

如 果 你 正在 构建 Web 应 用 或 者 图 形 化 UI 组 件 (跑马 灯 、 标 签 卡 、 手 风琴 等 )， 则 需要 思考 一 
下 如 何 提 炼 成 有 效 的 标记 。 


好 的 标记 如 此 重要 , 是 因为 它 为 所 有 用 户 体验 打下 了 良好 的 基础 ,你 在 HTML 上 的 优化 越 多 ， 
你 在 CSS 和 JavaScript 上 为 老式 浏览 器 所 做 的 优化 就 越 少 。 并 且 , RAA, 真 的 没有 人 喜欢 写 代 码 
来 文 持 老 式 浏览 
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如 果 想 要 更 好 地 了 解 渐进 增强 并 且 观 看 一 些 真实 的 例子 ， 我 推荐 以 下 两 篇 
文章 。 它 们 深入 介绍 了 如 何 使 用 HTML 和 CSS 来 实现 一 些 复杂 的 交互 。 
A 


O http://www.cssmojo.com/how-to-style-a-carousel/ 
O http://www.cssmojo.com/use-radio-buttons-for-single-option/ 




















开始 使 用 这 种 方式 去 开发 并 不 是 一 件 容易 的 事 。 然 而 , 这 种 开发 能 够 大 大 地 减轻 你 在 低级 浏 
览 器 上 的 工作 量 。 


接 下 来 ,我 们 讨论 一 下 那些 浏览 





10.4 ”确定 需要 支持 的 浏览 器 


了 解 一 个 Web 项 目 需要 支持 的 浏览 器 和 设备 对 于 开发 一 个 成 功 的 响应 式 网 站 是 十 分 重要 的 。 
我 们 已 经 了 解 了 为 什么 渐进 增强 对 于 此 十 分 有 用 。 如 果 你 做 得 足够 好 , 那么 你 网 站 的 绝 大 部 分 即 
使 在 最 老 的 浏览 器 上 也 能 有 效 运行 。 

但 是 ， 有 的 时 候 根据 项 目 需要 ， 你 要 从 更 为 高 级 的 浏览 器 开始 编写 。 例 如 ， 在 你 的 项 目 中 
JavaScript 是 必需 的 ， 这 种 情况 并 不 罕见 。 在 这 种 情况 下 ， 你 仍然 可 以 使 用 渐进 增强 的 开发 模式 ， 
只 是 你 的 起 点 不 一 样 而 已 。 

无 论 你 的 起 点 是 什么 , 关键 是 建立 它 。 只 有 这 时 ,你 才能 定义 你 想 支 持 的 不 同 浏览 器 和 设备 
上 的 视觉 效果 和 功能 体验 。 




































































10.4.1 等 价 的 功能 ， 而 不 是 等 价 的 外 观 


让 网 站 在 每 个 浏览 器 上 的 外 观 和 工作 方式 一 样 是 不 现实 也 是 不 可 取 的 。 除 了 某 些 浏览 器 专 有 
的 怪 闸 , 也 需要 考虑 必要 的 功能 问题 。 例如， 对 于 没有 鼠标 配置 的 触摸 屏 设 备 ,我 们 就 要 考虑 按 
钮 和 链接 的 触摸 性 。 


因此 ， 作 为 一 名 Web 开 发 人 员 ， 你 应 该 告诉 你 的 需求 方 ( 老板、 客户 、 股 东 ),“ 支 持 老式 浏 
览 咒 ”并 不 意味 着 “在 老式 浏览 右上 看 起 来 一 模 一 样 "。 我 倾向 于 在 支持 的 各 个 浏览 吉 上 功能 一 
致 而 非 外 观 一 致 。 这 意味 着 如 果 你 要 实现 一 个 结账 功能 ,所 有 用 户 都 应 该 能 够 结账 并 且 购 买 货物 。 
可 能 在 现代 浏览 器 上 , 用 户 可 以 体验 更 棒 的 视觉 和 交互 效果 , 但 是 核心 任务 在 所 有 浏览 器 上 都 是 
可 实现 的 。 





















































10.4.2. ”选择 要 支持 的 浏览 器 




















通常 ， 当 谈 到 要 支持 哪些 浏览 器 的 时 候 , 我 们 其 实 是 在 讨论 我 们 所 支持 的 最 古老 的 浏览 器 是 C 
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什么 。 这 里 有 几 个 可 能 性 需要 考虑 ， 视 情况 而 定 。 


如 果 已 经 是 一 个 现 有 的 网 站 ， 那 么 看 一 下 访客 统计 〈Google 统 计 或 者 类 似 的 方法 )。 通 过 数 
字 你 可 以 做 一 些 粗略 的 计算 。 例 如 ， 假 如 支持 X 浏 览 器 的 成 本 小 于 X 浏 览 器 将 带 来 的 价值 ， 那 么 
LFX VE d o 


同样 ， 假 如 观察 到 某 个 浏览 器 的 用 户 统计 持续 低 于 10%， 回 顾 过 去 并 考虑 未 来 发 展 趋势 。 在 
过 去 的 93、6、12 个 月 里 ， 这 个 数据 是 怎么 变化 的 ? 如 果 现 在 是 6% ， 而 且 在 过 去 的 12 个 月 里 这 个 
数据 已 经 收缩 了 一 半 ， 那 么 你 就 有 强 有 力 的 理由 放弃 支持 该 款 浏 览 需 。 


如 果 这 是 个 新 项 目 ， 并 且 没 有 统计 数据 ,我 通常 会 遵循 “前 两 个 版 本 ”策略 ， 即 是 指 当前 的 
浏览 器 版 本 和 之 前 的 两 个 浏览 器 版 本 。 举 个 例子 ， 如 果 IE12 是 目前 的 浏览 器 版 本 ,那么 你 就 要 兼 
容 IE10 和 IE11 (前 两 个 版 本 )。 这 种 选择 是 和 那些 “ 常 青 树 ”浏览 器 挂 钓 的 ,“ 常 青 树 ”浏览 器 是 
指 那 些 以 较 短 的 周期 持续 更 新 版 本 的 浏览 器 ( 如 Firefox 和 Chrome )。 











































































































10.5 ”分 层 的 用 户 体 验 


此 时 ,让 我 们 假设 股东 对 Web 开 发 有 一 定 的 了 解 ， 并 且 在 团队 中 。 我 们 也 假设 你 已 经 确定 好 
了 目标 浏览 器 。 那 么 我 们 现在 可 以 将 体验 分 为 不 同 层级 。 我 喜欢 简单 ， 所 以 会 将 它们 区 分 为 “ 基 
本 ”体验 和 “增强 ”体验 。 


基本 体验 是 站 点 的 最 小 可 行 版 本 , 而 增强 体验 则 是 包括 所 有 功能 并 且 最 为 美观 的 版 本 。 当然， 
在 你 的 层次 里 ， 可 能 要 包括 更 多 粒度 。 例 如 ， 不 同 浏览 器 应 该 根据 相应 的 特征 提供 不 同 的 体验 ， 
比如 是 否 支 持 Flexbox 或 者 Eranslate3d。 不 管 层次 如 何 定 义 ， 你 一 定 要 定义 它们 ， 并 且 要 知道 
你 需要 交付 什么 层次 。 然 后 你 就 可 以 编写 那些 层次 了 。 





















































实现 体验 分 层 


当前 ，Modemizr 为 基于 浏览 器 兼容 性 的 优化 提供 了 最 为 稳健 的 方式 。 尽 管 这 意味 着 要 为 你 
的 项 目 添加 JavaScript 依 赖 ， 但 我 认为 这 是 值得 的 。 

记 住 , 当 编 写 CSS 的 时 候 , 没有 被 媒体 查询 包 囊 的 代码 或 者 没有 被 Modernizr 添 加 选择 器 的 代 
码 ， 应 该 是 由 “基础 ”版 本 代码 组 成 的 。 


然后 通过 Modernizr, 我 们 可 以 根据 浏览 器 的 兼容 性 优化 体验 。 如 果 你 回头 看 example_08-07， 
会 看 到 我 在 离 屏 菜单 中 使 用 了 这 种 编码 方式 。 
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10.6 将 CSS 断 点 与 JavaScript 联系 起 来 


通常 ， 一 些 页 面 上 的 交互 都 会 涉及 JavaScript。 当 你 在 开发 响应 式 项 目的 时 候 , 可 能 想 在 不 同 
尺寸 的 视 口 里 看 到 不 同 的 效果 。 这 既 包 括 CSS 也 包括 JavaScript。 


假设 我 们 想 在 到 达 某 个 CSS 断 点 的 时 候 调 用 特定 的 JavaScript 函 数 ( 记 住 ,“ 断 点 ”是 用 来 定 
义 在 响应 式 设 计 中 某 个 显著 改变 点 的 术语 )。 让 我 们 假设 这 个 断 点 是 47.5rem( 如 果 字 体 大 小 是 16 
像素 , 则 这 个 断 点 是 760 像 素 )， 而 我 们 只 想 在 这 个 大 小 上 运行 函数 。 最 容易 想到 的 方法 就 是 量 屏 
幕 的 尺寸 ， 当 尺寸 值 匹配 的 时 候 调 用 相应 的 函数 。 


JavaScript 总 是 返回 宽度 的 像素 值 而 不 是 REM 值 ， 所 以 这 里 是 第 一 个 需要 改变 的 地 方 。 然 而 ， 
即使 我 们 在 CSS 上 将 断 点 的 值 设置 为 像素 值 ， 这 仍然 意味 着 我 们 有 两 个 地 方 需要 维护 。 
























































万 幸 的 是 ,我 们 有 更 好 的 方法 。 我 最 先是 JeremyKeith 的 网 站 上 看 到 这 种 方法 的 :https:/adactio. 


com/journal/5429/ , 


你 可 以 在 example_10-01 中 找到 完整 的 源 代 码 。 然 而 基本 思想 是 , 我 们 在 CSS 上 插入 一 些 能 够 
让 JavaScript 轻 易 理解 的 值 。 


看 一 下 下 面 的 CSS 代 码 : 


@media (min-width: 20rem) { 
body::after { 
content: "Splus"; 
font-size: 0; 
} 
} 
@media (min-width: 47.5rem) { 
body::after { 
content: "Mplus"; 
font-size: 0; 
} 
} 
@media (min-width: 62.5rem) { 
body::after { 
content: "Lplus"; 
font-size: 0; 
} 
} 


在 每 一 个 我 们 想 和 JavaScript 沟 通 的 断 点 处 , 我 们 使 用 了 aftez 伪 元 素 ( 你 也 可 以 使 用 before 
伪 元 素 ), 并且 将 其 内 容 设置 为 断 点 的 名 称 。 在 上 例 中 ， 我 使 用 了 splus 对 应 小 屏幕 ，Mplus 对 
应 中 等 大 小 屏幕 ，Lplus 对 应 大 屏幕 。 你 可 以 使 用 任何 你 认为 合理 的 名 字 和 值 (不 同 的 方位 、 不 
司 的 高 度 、 不 同 的 宽度 等 )。 
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M ::beforejfe :i:after 44 7G X JE TE A 35 T. DOM 76 X d& A 8| DOM 中 
Q 的 。: :before 作 为 第 一 个 子 元 素质 入 , 而: :after 则 作为 最 后 一 个 子 元 素质 入 。 
你 可 以 在 你 的 浏览 器 的 开发 者 工具 中 确认 这 一 点 。 


在 CSS 设 置 中 ,我 们 可 以 看 到 DOM， 并 且 能 看 到 : :after 伪 元 素 。 























R ELH > - |@ De... [ Styl... | 区 Shade... |© Perfor... | F T... |F N..| BB d |$ D G x 
| <!DOCTYPE html> styles.css:14 @(min-width: 62.5rem) 
<html class="no-js" lang="en"> body: :after { 
<head></head> content: "Mplus"; 
<body> font-size: 0px; 
«script src-'main.js"»«/script» | 
:safter styles.css:8 @(min-width: 47.5rem) 
</body> body: :after { 
</html> contenti "Mplus 
£ont-sizei-—0px 
H 














然后 在 JavaScript 中 ， 我 们 可 以 阅读 这 个 值 。 首 先 ， 我 们 将 这 个 值 赋 给 一 个 变量 。 


var size = window.getComputedStyle(document.body,':after'). 
getPropertyValue('content'); 


一 旦 获得 了 它 , 我 们 就 可 以 做 很 多 事情 了 。 为 了 证 明 这 个 概念 , 我 编写 了 一 个 简单 的 自我 调 
函数 ( 自我 调用 意味 着 它 在 浏览 器 解析 它 的 时 候 马 上 被 调用 ) 来 根据 视 口 大 小 弹出 不 同 的 信息 : 


;(function alertSize() ( 
if (size.indexOf("Splus") !--1) ( 
alert('I will run functions for small screens'); 


if (size.indexOf("Mplus") !--1) ( 
alert('At medium sizes, a different function could run'); 


if (size.indexOf("Lplus") !--1) ( 
alert('Large screen here, different functions if needed'); 


3)0; 


我 希望 你 可 以 在 你 的 项 目 中 做 比 弹 出 信息 更 为 有 趣 的 事情 ， 我 相信 你 会 通过 这 种 方式 获 益 
的 。 这 样 你 也 不 会 再 遇 到 CSS 媒 体 查 询 结 果 和 JavaScript 函 数 运行 结果 不 一 致 的 x. 





10.7 ”避免 在 生产 中 使 用 CSS 框架 


有 很 多 免费 的 CSS 框 架 旨 在 帮助 快速 搭建 响应 式 网 站 ， 其 中 最 为 有 名 的 两 个 是 Bootstrap 
( http:;//getbootstrap.com/ ) 和 Foundation ( http://foundation.zurb.com/ )。 尽 管 这 两 个 项 目 都 十 分 棒 ， 
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尤其 是 在 学 习 如 何 搭 建 响应 式 视觉 效果 方面 ， 但 我 仍然 认为 在 生产 中 应 该 避免 使 用 它们 。 


我 和 很 多 一 开始 使 用 了 其 中 一 个 框架 , 最 后 却 要 修改 它 以 满足 需求 的 开发 者 谈 过 。 这 种 方法 
在 快速 制作 原型 方面 有 巨大 的 优势 ( 例如， 把 交互 方式 展现 给 客户 看 )， 但 我 认为 把 它 加 入 到 生 
产 项 目 中 是 一 种 错误 的 策略 。 


首先 ， 从 技术 上 看 ， 添 加 一 个 框架 会 为 你 的 项 目 带 来 过 多 的 元 余 代码 。 其 次 ， 从 美学 的 角度 
上 看 ， 因 为 这 种 框架 十 分 普及 ， 所 以 你 的 项 目 会 和 无 数 个 其 他 项 目 看 起 来 一 模 一 样 。 

最 后 ,如 果 你 只 是 在 你 的 项 目 里 复制 粘贴 代码 , 然后 调整 至 符合 你 的 需求 ,那么 你 就 不 可 能 
充分 理解 它们 的 原理 。 只 有 通过 定位 和 解决 你 遇 到 的 问题 ， 你 才能 掌握 你 项 目 中 的 代码 。 









































10.8 采用 务实 的 解决 方案 


当 涉 及 前 端 Web 开 发 的 时 候 , 我 总 会 为 “象牙 塔 里 的 理想 主义 ”而 头疼 。 在 尝试 去 做 “正确 ” 
的 事情 时 ,我们 要 尽 可 能 选择 务实 的 做 法 。 让 我 举 个 例子 ( 完整 代码 见 example_10-02 )。 假 设 我 
们 有 一 个 按钮 可 以 打开 离 屏 菜单 。 我 们 的 自然 反应 可 能 会 是 这 么 编写 : 














«button class="menu-toggle js-activate-off-canvas-menu"> 
<span aria-label="site navigation">&#9776;</span> menu 
</button> 


美观 又 简单 。 因 为 它 是 按钮 ， 所 以 我 们 使 用 了 button 元 素 。 我 们 在 按钮 上 使 用 了 两 个 不 同 
的 HIML 类 ， 一 个 会 是 CSS 样 式 的 钧 子 (menu-toggle )， 而 另 一 个 则 是 JavaScript £J T 
(js-activate-off-canvas-menu )。 男 外 ,我 们 使 用 了 aria-label 属 性 (第 4 章 详细 介绍 过 
ARIA ) 来 告诉 屏幕 读 取 器 span 元 素 中 字符 的 意义 。 在 本 例 中 ， 我 们 使 用 了 &#9976; 这 是 一 个 
Unicode 字 符 ， 代 表 了 八卦 中 的 天 卦 。 它 被 用 在 这 里 ， 仅 仅 是 因为 它 和 象征 菜单 的 “汉堡 图 标 ” 
十 分 相像 。 


























E 如 果 你 想 获 取 关 于 何 时 以 及 如 何 使 用 aria-label 属 性 的 建议 , 我 强烈 推荐 
Heydon Pickering 在 Opera 开 发 者 网 站 上 编写 的 这 篇 文章 : https://dev.opera.com/ 


articles/ux-accessibility-aria-label/。 








此 时 ,我 们 的 状态 还 是 十 分 不 错 的 。 语义 化 、 简 易 的 标记 和 功能 区 分 完整 的 类 。 下 面 ， 让 我 
们 调整 一 下 样式 吧 : 


.menu-toggle { 
appearance: none; 
display: inline-flex; 
padding: 0 10px; 
font-size: 17px; 
align-items: center; 
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justify-content: center; 
border-radius: 8px; 
border: 1px solid #ebebeb; 
min-height: 44px; 
text-decoration: none; 


colo 


} 


Zu 


#777; 


[aria-label="site navigation"] { 
margin-right: 1ch; 
font-size: 24px; 


} 





我 们 在 Firefox 上 打开 ， 效 果 如 下 : 





menu 











然而 这 并 不 是 我 们 想 要 的 。 在 这 种 情况 下 ,浏览 器 决定 了 我 们 走 得 太 远 了 。Firefox 不 允许 我 
们 将 一 个 按钮 元 素 设 为 Flex 容 器 。 这 令 开发 者 十 分 纠结 。 我 们 应 该 选择 正确 的 元 素 还 是 正确 的 外 
观 效果 呢 ? 理想 状况 下 ， 我 希望 “汉堡 图 标 ” 在 左 侧 ， 而 文字 “menu” 在 右 侧 。 


























你 可 以 在 上 例 代 码 中 看 到 我 们 使 用 了 appearance 必 性 。 它 用 于 移 除 浏览 器 


x 对 于 表单 元 素 的 默认 样式 ， 并 且 拥 有 一 段 简短 的 历史 。 它 是 由 W3C 规 定 的 ， 但 

是 不 久之 后 就 被 抛弃 了 ,只 剩 下 在 Firefox 和 Webkit 内 核 浏览 器 上 带 有 浏览 器 前 级 

的 版 本 。 万 幸 的 是 ， 现 在 它 重 新 回 到 了 规范 中 : https://drafts.csswg.org/css-ui-4/ 
#appearance-Switching。 


使 用 链接 代 蔡 按钮 


我 不 得 不 承认 , 在 这 种 两 难 的 情况 下 ,我 通常 会 选择 后 者 。 然 后 我 努力 弥补 我 使 用 错误 元 素 
的 事实 ， 方 式 是 选择 次 优 元 素 ， 修 改 它 的 ARIA 角 色 来 让 其 和 正确 的 元 素 表 现 一 致 。 在 本 例 中 ， 
我 们 的 菜单 按钮 不 是 一 个 链接 ( 毕竟 ， 它 不 会 跳 转 到 任何 地 方 )， 它 只 是 一 个 为 我 所 用 的 标签 。 
我 使 用 链接 元 素 的 原因 是 它 比 其 他 元 素 都 更 像 按 钮 元 素 。 而 通过 使 用 链接 元 素 , 我 们 可 以 实现 梦 
轰 以 求 的 外 观 效 果 。 下 面 是 我 编写 的 标记 。 注意, 我 在 a 标签 上 添加 了 ARIA 角 色 来 表示 它 的 功能 








是 按钮 〈 而 不 


E 
AE 
































默认 的 链接 ): 


«a class-"menu-toggle js-activate-off-canvas-menu" role="button"> 
«span aria-label-"site navigation"»5&49776;«/span» menu 


«/a» 
































尽管 这 不 完美 ， 但 确实 是 一 个 务实 的 解决 方案 。 下 面 是 两 个 方案 ( 左边 是 putton 元 素 , A 


边 是 a 标 签 ) 在 Firefox ( 版 本 是 39.0a2 ) 上 的 展现 效果 





o 


10.10 根据 视 口 隐藏 、 展 示 和 加 载 内 容 215 

















当然 ， 在 这 个 简单 的 例子 里 ， 我 们 可 以 将 display 从 flex 改 为 block， 然 后 使 用 padging 
来 达到 我 们 需要 的 外 观 效 果 。 又 或 者 ， 我 们 可 以 继续 使 用 button 元 素 ， 然 后 将 另外 一 个 语义 上 
无 意义 的 元 素 ( span ) 作为 Flex 容 器 来 包 右 它 。 你 可 以 根据 自己 的 喜好 来 权衡 使 用 哪 种 方法 。 


归根 到 底 ， 是 由 我 们 自己 来 使 文档 标记 更 为 合理 。 有 的 开发 者 会 有 一 个 极端 的 想法 ， 只 使 用 
Giv 和 span 来 确保 浏览 器 上 没有 不 想 要 的 样式 效果 。 代 价 是 他 们 的 元 素 没 有 内 在 含义 ， 换 言 之 ， 
可 访问 性 较 差 。 而 另 一 个 极端 则 是 标记 纯粹 主义 者 ,他们 认为 使 用 正确 的 标记 是 最 重要 的 ,无 论 
视觉 效果 最 终 看 起 来 如 何 。 我 认为 ， 折 中 是 更 为 明智 和 有 效 的 做 法 。 




































































10.9 尽 可 能 使 用 最 简单 的 代码 


新 技术 提供 的 帮助 的 确 很 迷人 。 但 是 要 记 住 ,使 用 最 简单 的 方式 去 达到 你 的 目的 。 例 如， 如 
果 你 需要 为 列表 中 的 第 五 个 元 素 添 加 不 同 的 样式 , 并 且 你 能 操作 标记 , 那 就 不 要 像 下 面 这 样 使 用 
nth-chilgd 选 择 器 : 























.list-item:nth-child(5) { 
/* REA */ 
} 


如 果 你 可 以 操作 标记 ， 直 接 在 标记 上 添加 HTML 类 是 更 为 明智 的 做 法 : 


























«li class-"list-item specific-class">Item</1i> 
然后 使 用 类 来 添加 样式 : 
.Specific-class ( 
/* 样式 */ 
} 


它 不 仅 更 易 履 ， 而 且 支 持 度 也 更 高 (旧版 本 的 开 浏 览 右 并 不 支持 nth-child 选 择 絮 )。 











10.10 ”根据 视 口 隐藏 、 展 示 和 加 载 内 容 


在 响应 式 Web 设 计 中 有 一 个 常用 的 准则 : 如 果 你 在 小 屏幕 上 不 加 载 某 一 部 分 , 那么 在 大 屏幕 
上 也 不 应 该 加 载 。 


这 意味 着 在 每 一 个 视 口 下 用 户 都 应 该 能 达到 同样 的 目的 〈 购买 产品 、 阅 读 文章 、 完 成 交互 )。 CN 
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是 常识 。 毕 竞 , 作为 用 户 ， 如果 只 是 因为 屏幕 尺寸 问题 而 不 能 在 网 站 上 进行 操作 ,我 们 会 感到 
落 。 


这 也 同样 意味 着 ， 随 着 屏幕 的 尺寸 越 来 越 大 , 我 们 也 没有 必要 去 增加 额外 的 部 分 ( 窗口 小 部 
件 、 广 告 、 链 接 等 ) 来 填充 空白 。 如 果 没 有 了 这 些 额 外 的 部 分 , 用 户 也 能 在 小 屏幕 中 良好 地 使 用 ， 
那么 在 大 屏幕 里 他 们 也 应 该 问题 不 大 。 在 较 大 尺寸 的 视 口 里 展示 额外 的 部 分 也 就 意味 着 , 要么 在 
小 视 口 里 隐藏 部 分 元 素 (通常 是 使 用 CSS 中 的 display: none), 要 么 在 某 种 特定 的 视 口 下 进行 
额外 的 加 载 ( 在 JavaScript 的 帮助 下 )。 简 洁 而 言 ， 要 么 是 部 分 内 容 被 加 载 了 但 不 可 见 ， 要 么 是 部 
分 内 容 可 见 但 尚未 加 载 。 


广义 地 说 , 我 认为 上 面 的 准则 十 分 中 肯 。 如 果 贯 彻 下 去 ,能 够 让 设计 师 和 开发 者 透彻 地 思考 
如 何 安排 页 面 中 的 内 容 。 然 而 ， 就 像 以 往 的 Web 设 计 一 样 ， 总 是 会 有 例外 的 。 


我 总 是 尽量 避免 在 不 同 的 视 口 上 加 载 新 的 标记 , 但 是 有 时 这 是 必需 的 。 我 曾经 编写 过 一 个 复 
杂 的 交互 界面 ， 需 要 在 更 宽 的 视 口 里 加 载 不 同 的 标记 和 设计 。 


在 这 种 情况 下 ,JavaScript 用 于 将 一 个 区 域 中 的 标记 替换 掉 。 这 不 是 理想 的 情况 , 但 这 是 最 为 
务实 的 做 法 。 如 果 因 为 种 种 原因 JavaScript 失 败 了 , 用 户 可 以 得 到 较 小 的 视 口 布局 。 他 们 仍然 能 够 
进行 想 要 的 操作 ， 这 是 我 在 当时 的 条 件 下 最 好 的 实现 方式 。 

随 着 你 编写 的 响应 式 Web 设 计 越 来 越 多 ,你 会 遇 到 各 种 各 样 的 选择 ,你 需要 自己 判断 在 给 定 
的 情景 下 哪 种 选择 更 好 。 不 过 ， 使 用 display: none 来 隐藏 某 些 元 素 从 而 达到 目标 也 不 是 一 个 
坏 方法 。 


ee 
















































































































































































将 复杂 的 可 视 化 工作 交 给 CSS 


事实 已 经 证 明 , JavaScript 可 以 实现 单独 使 用 CSS 无 法 实现 的 交互 效果 。 然而, 如 果 可 能 的 话 ， 
在 涉及 视觉 效果 的 时 候 , 我 们 仍然 应 该 将 工作 交 给 CSS 来 完成 。 这 意味 着 ,不 要 单独 使 用 JavaScript 
实现 菜单 移 和 人 入、 移出、 打开、 关闭 的 动画 效果 (〈 说 的 就 是 你 正在 使 用 的 jQuery 的 show 和 hiae 方 












































法 )。 相 反 ， 使 用 JavaScript 在 相关 的 部 分 上 做 简单 的 类 变换 ， 然 后 让 类 去 触发 CSS 展 示 相 关 的 动 
画 效 果 。 











为 了 确保 性 能 ， 在 改变 类 的 时 候 ， 请 保证 你 改变 的 类 尽 可 能 与 你 的 目的 相 

关 。 举 个 例子 ， 如 果 你 想 让 弹出 框 出 现在 菜 个 元 素 上 ， 那 么 在 它们 俩 共享 的 最 

> 近 的 父 元 素 上 添加 相关 类 。 这 将 确保 只 有 相关 的 部 分 变 “ 脏 "， 而 不 用 重 绘 广大 
的 页 面 区 域 ， 从 而 保证 性 能 。 如 果 想 学 习 更 多 关于 性 能 优化 方面 的 知识 ， 可 以 
参考 Paul Lewis 的 “浏览 器 泻 染 优 化 ”课程 : https:/www.udacity.com/course/ 


browser-rendering-optimization--ud860。 


10.11 验证 器 和 代码 检测 工具 217 





10.11 验证 器 和 代码 检测 工具 


总 的 来 说 ,HTML 和 CSS 的 容错 性 十 分 好 。 你 可 以 错误 地 骨 套 、 漏 写 引号 或 者 忘记 闭合 标签 ， 
然而 却 一 点 问题 都 没有 。 尽 管 如 此 ， 几 乎 每 周 我 都 会 被 错误 的 标记 所 迷惑 。 有 的 时 候 可 能 是 一 时 
手 滑 打 错 了 字符 ， 有 的 时 候 像 一 个 小 学 生 那 样 将 aiv 艇 套 在 span 里 ( 因为 span 是 一 个 inline 元 
素 而 aiv 是 一 个 block 元 素 ， 这 样 会 造成 不 可 预测 的 结果 )。 万 幸 的 是 ， 有 工具 可 以 帮助 我 们 。 在 
最 坏 的 情况 下 ， 如 果 你 遇 到 一 个 奇怪 的 问题 ， 可 以 前 往 https:/validatorw3.org/， 然 后 在 上 面 粘贴 
你 的 代码 。 它 会 指出 所 有 的 错误 并 且 附 上 相应 行 数 ， 帮 助 你 去 修复 。 



































Markup Validation Service 
bcd Check the markup (HTML, XHTML, ...) of Web documents 


Jump To: Notes and Potential Issues Congratulations - Icons 





= gemere 


Result: Pas: 




















<!doctype html> | 
<html class="no-js" lang="en"> 
<head> 

<meta charset="utf-8"> 

<title>An example from http://rwd.education</title> 

«meta name="description" content="An example from the book, 'Responsive Web Design with HTML5 and CSS3' 
Source: by Ben Frain"> : . / i 

«meta name-"viewport" content="width=device-width"> 

«meta name-"theme-color" content-"£ff9900"- 
«link rel="stylesheet" hrefz"styles.css"» 


«/head» 
«body» n 3 
«button class-"menu-toggle js-activate-off-canvas-menu"» 
Encoding: uti-8 (detect automatically) E] 
Doctype: HTML5 (detect automatically) [5] 


Root Element: html 











Wt & = VALIDATOR Try now the W3C Validator Suite™ premium service that checks your entire website and evaluates its conformance with W3C open standards to 
i P^ y Suite quickly identify those portions of your website that need your attention. 











更 好 的 方法 是 为 你 的 HTML、CSS 和 JavaScript 安 装 和 配置 检测 工具 。 又 或 者 选择 一 款 内 置 有 
代码 检测 工具 的 文本 编辑 器 。 然 后 在 你 开发 的 时 候 ， 所 有 的 问题 都 会 被 标记 出 来 。 下 例 是 微软 的 
Code 编 辑 器 标记 出 来 的 一 个 CSS 拼 写 错 误 。 


(eee . days-since.css - bf2 


* . days-since.cs: 


















































.post-DaysSince ( 
display: flex; 
width: 100%; 
alig Rename to 'width’ 


Rename to 'max-width' 


marg 


Rename to 'min-width' 


font-size: 1.1rem; 

line-height: 1; 

border: 1px solid W #dedede; 
background-color: $color-blockquote; 
padding: 5px 6; 
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笨拙 的 我 把 viath 拼 写成 了 wiatth。 编 辑 器 马上 就 发 现 了 ， 并 且 指 出 了 我 的 错误 ， 还 提供 








了 一 些 修 改建 议 。 尽 可 能 地 去 使 用 这 些 工具 吧 。 这 比 花 大 量 时 间 在 代码 里 查找 简单 的 语法 错误 更 


有 意义 。 


10.12 ”性 能 





对 于 响应 式 Web 设 计 ， 人 性 能 和 外 观 一 样 重要 。 然 而 ， 性 能 的 衡量 标准 总 是 会 变化 。 例 如 ， 浏 
览 需 更 新 并 改进 了 它们 处 理 资 源 的 方法 ,发 现 了 足以 蔡 代目 前 的 “最 佳 方法 ”的 新 技术 ,技术 终 




















于 被 浏览 器 广泛 支持 ， 可 以 被 广泛 采纳 了 。 这 样 的 例子 不 胜 枚 举 。 


不 过 仍然 有 一 些 基础 条 例 是 十 分 稳定 的 (好 吧 , 到 HTTP2 善 及 后 ,它们 中 的 计 
如 下 。 








F 多 都 会 被 放弃 )， 


(1) 减少 你 的 资源 数 ( 例如 ， 不 要 加 载 15 个 JavaScript 文 件 ， 而 应 该 将 它们 拼 成 一 个 )。 








(2) 减 小 你 的 页 面 大 小 ( 如 果 你 能 压缩 图 片 ， 那 么 请 压缩 )。 








(3) 延迟 加 载 非 必需 资源 ( 如 果 你 可 以 将 CSS 和 JavaScript 的 加 载 延 迟到 页 面 加载 完 成 后 ， 就 


可 以 大 幅 缩短 初始 化 时 间 )。 
(4) 保证 页 面 尽快 可 用 (通常 是 上 述 所 有 步骤 的 副 产 物 )。 




















有 很 多 工具 可 以 度量 和 优化 性 能 ,我 最 喜欢 的 是 https://www.webpagetest.org/。 它 是 最 简单 的 ， 














你 只 需要 输入 一 个 网 址 然后 点 击 START TEST 即 可 。 它 会 显示 出 一 份 完整 的 页 面 分 析 。 不 过 更 有 











图 是 BBC 主 页 的 检测 结果 : 








用 的 是 , 它 还 会 按照 幻灯 片 的 方式 显示 出 页 面 的 加 载 过 程 ， 让 你 知道 如 何 改进 页 面 加 载 速 度 。 下 





HOME TEST RESULT TEST HISTORY FORUMS DOCUMENTATION ABOUT 


Tested From: Manchester, UK - Chrome - Cable 


Export filmstrip as an image... 


@ Siow Motion 


Thumbnail Size Thumbnail Interval Comparison End Point 


@ smal (WAEN @ Visually Complete 
@ Medium @ 0.5 sec [ Last Change 

@ Large [ BEES [ Document Complete 
Advanced customization options... [ EL [ Fully Loaded 
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当 你 尝试 优化 性 能 时 ， 确 保 在 开始 前 衡量 性 能 表现 ( 否则 ,你 不 知道 你 的 优化 工作 的 成 果 )。 
然后 调整 、 测 试 ， 再 重复 上 述 步 又。 





10.43 下 一 个 划时代 的 产物 


前 端 发 展 的 一 个 有 趣 之 处 就 是 快速 的 改变 。 总 是 有 新 事物 需要 学 习 ， 而 Web 社 区 则 孜孜 不 傍 
地 挖 据 更 好 、 更 快 、 更 有 效 的 解决 问题 的 方式 。 


例如 , 在 写 这 本 书 的 三 年 前 , 响应 式 图 片 ( 第 3 章 对 srcset 和 picture 元 素 进 行 过 详细 介绍 ) 
就 不 存在 。 想 当年 , 我们 只 能 使 用 第 三 方 的 解决 方法 来 为 不 同 的 视 口 提供 适合 的 图 片 。 既 然 现 在 
这 一 普遍 的 需求 被 W3C 规 范 化 了 ， 我 们 就 可 以 放心 地 使 用 了 。 

同样 ， 不 久 前 ，Flexbox 只 是 在 规范 作者 眼前 一 内 而 过 而 已 。 哪 怕 当 其 被 写 人 规范 ， 它 仍然 
十 分 难 用 。 直 到 Andrey Sitn 冰 和 他 在 Evil Martians ( https://evilmartians.com/ ) 上 的 聪明 的 合作 人 写 
出 了 Autoprefixer， 我 们 才能 相对 轻松 地 跨 浏览 器 使 用 它 。 


未 来 还 会 有 更 多 令 人 兴奋 的 功能 需要 我 们 理解 和 实现 。 我 们 已 经 在 第 4 章 里 提 到 了 Service 
Workers。 它 就 是 一 个 创建 离线 Web 应 用 的 更 好 的 方法 。 详 情 可 以 阅读 https://www.w3.org/TR/ 
service-workers/。 























还 有 “Web 组 件 ”, 它 是 一 个 规范 集合 , 包括 了 影子 DOM (http://w3c.github.io/webcomponents/ 
spec/shadow/ )、 自 定义 元 素 ( http://w3c.github.io/webcomponents/spec/custom/ ) 和 HTML 的 引入 方 
法 (http:/w3c.github.io/webcomponents/spec/imports/ )。 这 些 让 我 们 得 以 创建 完全 定制 的 、 可 复 用 
的 组 件 。 


然后 还 有 其 他 接 下 来 会 被 改进 的 地 方 ， 例 如 CSS4 的 选择 器 ( https://drafts.csswg.org/ 
selectors-4/ ) 和 CSS4 的 媒体 查询 ， 第 2 章 都 介绍 过 。 


最 后 , 另 一 个 隐约 可 见 的 重要 改变 就 是 HTTP2 了 。 它 承诺 将 会 让 目前 许多 所 谓 的 “最 佳 方法 ” 
变 成 “糟糕 的 方法 ”。 如 果 你 想 深 入 了 解 ， 我 推荐 你 阅读 Daniel Stenberg 的 “http explained”( 它 是 
一 个 免费 的 PDF )。 如 果 你 只 是 想 阅 读 一 个 简短 的 总 结 ， 可 以 阅读 Matt Wilcox 的 文章 “前 端 开发 
者 需要 了 解 的 HTTP2”( https://mattwilcox.net/web-development/http2-for-front-end-web-developers )。 









































10.14 小结 


本 书 已 至 结尾 , 我 希望 本 书 涵盖 了 所 有 相关 的 技术 和 工具 , 能 够 帮助 你 去 构建 你 的 下 一 个 响 
应 式 网 站 或 者 响应 式 Web 应 用 。 


我 认为 ， 通 过 事先 筹划 Web 项 目 ， 并 对 现存 的 工作 流 、 实 现 方式 和 技术 做 一 些 修改 , acr NN 
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创造 出 快速 、 灵 活 、 便 于 维护 的 响应 式 网 站 ， 并 且 能 在 任何 设备 上 都 表现 良好 。 


在 本 书 中 , 我 们 已 经 了 解 了 大 量 知识 , 包括 方法 、 技 术 、 性 能 优化 、 规 范 、 工 作 流 、 工 具 等 。 
我 不 敢 妄 想 有 人 阅读 一 次 就 学 会 了 全 部 内 容 。 因 此 , 当下 一 次 你 需要 使 用 某 个 语法 或 者 我 们 介绍 
过 的 某 项 响应 式 技术 ， 我 希望 你 可 以 翻 开本 书 进行 查阅 。 我 会 在 那里 等 你 。 


在 那 之 前 ， 我 祝福 你 在 响应 式 网 页 设计 的 过 程 中 好 运 连连 。 


再 见 。 











随 着 移动 设备 的 普及 ， 用 户 上 网 的 方式 发 生 了 巨大 变化 ， 无 论 从 样式 还 是 可 用 性 来 讲 ， 只 适合 桌面 显示 器 
的 网 站 已 经 过 时 了 。 如 今 ， 在 设计 网 站 的 时 候 必 须 同时 考虑 多 种 屏幕 尺寸 和 用 户 体验 。 如 果 网 站 对 你 或 你 的 客 
户 品牌 非常 重要 ， 那 么 实现 响应 式 设计 就 是 当务之急 。 

“响应 式 和 移动 优先 ”的 设计 理念 ， 可 以 确保 无 论 使 用 什么 设备 都 可 以 正常 访问 你 的 网 站 。 在 这 一 理念 的 
指导 下 ， 本 书 围绕 实战 案例 ， 全 面 讲解 了 与 响应 式 设计 相关 的 现代 Web 技 术 ， 堪 称 一 部 “响应 式 设计 大 全 ”。 

这 一 版 根据 最 新 的 Web 设 计 趋 势 进 行 了 更 新 ， 展 示 了 实现 现代 响应 式 设计 最 有 效 的 方式 ， 涵 盖 了 创建 优秀 
的 响应 式 设计 所 必需 的 全 部 最 新 技术 和 工具 。 掌 握 了 这 些 内 容 ， 你 设计 的 网 站 不 仅 可 以 适应 当下 ， 更 可 以 顺应 
未 来 。 


理解 响应 式 设计 ， 以 及 为 何 它 对 现代 Web 设 计 如 此 重要 

清晰 、 高 效 地 编写 富有 语义 的 HTML5 标 记 

使 用 CSS3 媒 体 查 询 基 于 设备 应 用 不 同 的 样式 ， 了 解 媒体 查询 的 最 新 进展 
根据 不 同 的 屏幕 大 小 、 分 辨 率 和 使 用 环境 加 载 不 同 的 图 片 

掌握 表单 处 理 ， 使 用 HTML5 标 记 添 加 日 期 选择 器 、 范 围 滑 块 等 交互 控件 

在 响应 式 设计 里 使 用 SVG 提 供 分 辨 率 无 关 的 图 片 ， 修 改 SVG 并 添加 动画 效果 

使 用 CSS 最 新 的 特性 ， 如 自 定义 字体 、nth-chi1lg 选 择 符 、 自 定义 属性 及 CSS calc 
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